added deferred/responsive images

_config/config.yml

@@ -6,4 +6,36 @@ SilverStripe\CMS\Model\SiteTree:
     - ilateral\SilverStripe\Carousel\Extensions\CarouselPage
 SilverStripe\Admin\LeftAndMain:
   extra_requirements_javascript:
-    - 'i-lateral/silverstripe-carousel: client/dist/scripts/carouseladmin.js'
+    - 'i-lateral/silverstripe-carousel: client/dist/scripts/carouseladmin.js'
+---
+After: 'silverstripe-responsive-images/*'
+---
+Heyday\ResponsiveImages\ResponsiveImageExtension:
+  sets:
+    TallCarousel:
+      arguments:
+        '(min-width: 1200px) and (min-device-pixel-ratio: 2.0)': [3840, 2160] # xl
+        '(min-width: 1200px)': [1920, 1080]
+        '(min-width: 992px) and (min-device-pixel-ratio: 2.0)': [2400, 1536] # lg
+        '(min-width: 992px)': [1200, 768]
+        '(min-width: 768px) and (min-device-pixel-ratio: 2.0)': [1948, 1536] # md
+        '(min-width: 768px)': [992, 768]
+      default_arguments: [800, 700] # xs
+    ShortCarousel:
+      arguments:
+        '(min-width: 1200px) and (min-device-pixel-ratio: 2.0)': [3840, 1400] # xl
+        '(min-width: 1200px)': [1920, 700]
+        '(min-width: 992px) and (min-device-pixel-ratio: 2.0)': [2400, 1200] # lg
+        '(min-width: 992px)': [1200, 600]
+        '(min-width: 768px) and (min-device-pixel-ratio: 2.0)': [1948, 1100] # md
+        '(min-width: 768px)': [992, 550]
+      default_arguments: [800, 700] # xs
+    LetterboxCarousel:
+      arguments:
+        '(min-width: 1200px) and (min-device-pixel-ratio: 2.0)': [3840, 800] # xl
+        '(min-width: 1200px)': [1920, 400]
+        '(min-width: 992px) and (min-device-pixel-ratio: 2.0)': [2400, 800] # lg
+        '(min-width: 992px)': [1200, 400]
+        '(min-width: 768px) and (min-device-pixel-ratio: 2.0)': [1948, 1000] # md
+        '(min-width: 768px)': [992, 500]
+      default_arguments: [800, 700] # xs

changelog.md

@@ -14,4 +14,8 @@
 
 ## 2.0.3
 
-* Require stable focuspoint
+* Require stable focuspoint
+
+## 2.1.0
+
+* Added defered/responsive images

composer.json

@@ -30,7 +30,8 @@
 	"require": {
 		"silverstripe/cms": "~4.0",
         "symbiote/silverstripe-gridfieldextensions": "~3.1",
-        "jonom/focuspoint": "~3.0"
+        "jonom/focuspoint": "~3.0",
+		"i-lateral/silverstripe-deferedimages": "^1.1"
 	},
     "autoload": {
         "psr-4": {

src/extensions/CarouselPage.php

@@ -2,17 +2,23 @@
 
 namespace ilateral\SilverStripe\Carousel\Extensions;
 
-use SilverStripe\ORM\DataExtension;
+use SilverStripe\Dev\Debug;
+use SilverStripe\Assets\Image;
 use SilverStripe\Forms\FieldList;
+use SilverStripe\Forms\FieldGroup;
+use SilverStripe\ORM\DataExtension;
+use SilverStripe\Core\Config\Config;
 use SilverStripe\Forms\LiteralField;
 use SilverStripe\Forms\NumericField;
-use SilverStripe\Forms\FieldGroup;
 use SilverStripe\Forms\CheckboxField;
+use SilverStripe\Forms\DropdownField;
+use SilverStripe\Core\Injector\Injector;
 use SilverStripe\Forms\GridField\GridField;
+use Heyday\ResponsiveImages\ResponsiveImageExtension;
+use ilateral\SilverStripe\Carousel\Model\CarouselSlide;
 use SilverStripe\Forms\GridField\GridFieldAddNewButton;
 use Symbiote\GridFieldExtensions\GridFieldOrderableRows;
 use SilverStripe\Forms\GridField\GridFieldConfig_RecordEditor;
-use ilateral\SilverStripe\Carousel\Model\CarouselSlide;
 
 /**
  * Extension to all page objects that add carousel slide relationships
@@ -33,8 +39,7 @@ class CarouselPage extends DataExtension
         'ShowCarousel'  => 'Boolean',
         "CarouselShowIndicators" => "Boolean",
         "CarouselShowControls" => "Boolean",
-        'CarouselWidth' => 'Int',
-        'CarouselHeight'=> 'Int',
+        "CarouselProfile" => "Varchar",
         "CarouselInterval" => "Int"
     ];
 
@@ -55,8 +60,7 @@ class CarouselPage extends DataExtension
      * @config
      */
     private static $defaults = [
-        'CarouselWidth' => 750,
-        'CarouselHeight' => 350,
+        'CarouselProfile' => 'ShortCarousel',
         'CarouselInterval' => 3000,
     ];
 
@@ -77,8 +81,7 @@ public function updateCMSFields(FieldList $fields)
         }
 
         $fields->removeByName('ShowCarousel');
-        $fields->removeByName('CarouselWidth');
-        $fields->removeByName('CarouselHeight');
+        $fields->removeByName('CarouselProfile');
 
         parent::updateCMSFields($fields);
     }
@@ -113,17 +116,18 @@ public function updateSettingsFields(FieldList $fields)
         );
 
         if($this->owner->ShowCarousel) {
+            $array = [];
+            foreach (array_keys(Config::inst()->get(ResponsiveImageExtension::class, 'sets')) as $key => $value) {
+                $array[$value] = $value;
+            }
             $fields->addFieldsToTab(
                 'Root.Settings',
                 [
-                    NumericField::create(
-                        'CarouselWidth',
-                        $this->owner->fieldLabel('CarouselWidth')
-                    ),
-                    NumericField::create(
-                        'CarouselHeight',
-                        $this->owner->fieldLabel('CarouselHeight')
-                    ),
+                    DropdownField::create(
+                        'CarouselProfile',
+                        $this->owner->fieldLabel('CarouselProfile'),
+                        $array
+                    )->setEmptyString('Choose one'),
                     NumericField::create(
                         'CarouselInterval',
                         $this->owner->fieldLabel('CarouselInterval')

src/model/CarouselSlide.php

@@ -89,18 +89,17 @@ class CarouselSlide extends DataObject
      */
     private static $default_sort = "Sort ASC";
 
-
-    public function getSizedImage()
+    /**
+     * Get fully rendered image for template
+     *
+     * @return HTMLText
+     */
+    public function getRenderedImage()
     {
         $parent = $this->Parent(); 
-        $width = $parent->CarouselWidth;
-        $height = $parent->CarouselHeight;
-
-        if($width && $height) {
-            return $this->Image()->FocusFill($width, $height);
-        } else {
-            return false;
-        }
+        $profile = $parent->CarouselProfile;
+
+        return $this->Image->{$profile}();
     }
 
     public function getCMSFields()

templates/ilateral/SilverStripe/Carousel/Includes/CarouselSlides.ss

@@ -23,11 +23,7 @@
         <div class="carousel-inner">
             <% loop $Slides %>
                 <div class="carousel-item <% if $First %>active<% end_if %>">
-                    <img
-                        class="d-block w-100"
-                        src="$SizedImage.URL"
-                        alt="$SizedImage.Title"
-                    >
+                    $RenderedImage
                     <% if Title %>
                         <div class="carousel-caption text-center d-none d-md-block slide-content">
 							<% if $Link.LinkURL %>