IMPR: Original image size option

_config/config.yml

@@ -62,3 +62,7 @@ Dynamic\Elements\Image\Elements\ElementImage:
 
 DNADesign\ElementalVirtual\Model\ElementVirtual:
   controller_template: VirtualElementHolder
+
+Dynamic\FlexSlider\Model\SlideImage:
+  extensions:
+    - A2nt\ElementalBasics\Extensions\SlideImageEx

src/Elements/SliderElement.php

@@ -8,9 +8,11 @@
 
 namespace A2nt\ElementalBasics\Elements;
 
+use Colymba\BulkUpload\BulkUploader;
 use Dynamic\Elements\Flexslider\Elements\ElementSlideshow;
 use Dynamic\FlexSlider\Model\SlideImage;
 use Dynamic\FlexSlider\ORM\FlexSlider;
+use SilverStripe\Assets\Image;
 use SilverStripe\Core\Injector\Injector;
 use SilverStripe\Forms\CheckboxField;
 use SilverStripe\Forms\LiteralField;
@@ -33,6 +35,8 @@ class SliderElement extends ElementSlideshow
 
     private static $db = [
         'Interval' => 'Int',
+        'SlidesInRow' => 'Int',
+        'ImageOriginalSize' => 'Boolean(0)',
     ];
 
     private static $extensions = [
@@ -50,14 +54,28 @@ class SliderElement extends ElementSlideshow
         return self::$singular_name;
     }
 
+    protected function ratioSize($size)
+    {
+        $count = $this->SlidesInRow;
+        return ($count > 1) ? $size / $count : $size;
+    }
+
     public function getSlideWidth()
     {
-        return self::config()->get('slide_width');
+        if($this->getField('ImageOriginalSize')){
+            return null;
+        }
+
+        return $this->ratioSize(self::config()->get('slide_width'));
     }
 
     public function getSlideHeight()
     {
-        return self::config()->get('slide_height');
+        if($this->getField('ImageOriginalSize')){
+            return null;
+        }
+
+        return $this->ratioSize(self::config()->get('slide_height'));
     }
 
     public function getCMSFields()
@@ -79,13 +97,22 @@ class SliderElement extends ElementSlideshow
         ]);
 
         $fields->addFieldsToTab('Root.Settings', [
-            NumericField::create('Interval', 'Auto-play Interval'),
+            CheckboxField::create('ImageOriginalSize', 'Use original image size'),
+            NumericField::create('Interval', 'Auto-play Interval (sec)'),
+            NumericField::create('SlidesInRow'),
         ]);
 
         $grid = $fields->dataFieldByName('Slides');
         if ($grid) {
             $config = $grid->getConfig();
 
+            $bulk = new BulkUploader('Image', SlideImage::class, false);
+            $bulk
+                ->setUfSetup('setFolderName', 'Uploads/SlideImages')
+                ->setUfSetup('getValidator.setAllowedExtensions', ['jpg', 'jpeg', 'png', 'gif']);
+            $config->addComponent($bulk);
+
+
             $columns = new GridFieldEditableColumns();
             $columns->setDisplayFields([
                     'Hide'  => [

src/Extensions/SlideImageEx.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: tony
+ * Date: 6/23/18
+ * Time: 1:23 PM
+ */
+
+namespace A2nt\ElementalBasics\Extensions;
+
+use DNADesign\Elemental\Models\BaseElement;
+use SilverStripe\CMS\Model\SiteTree;
+use SilverStripe\Forms\CheckboxField;
+use SilverStripe\Forms\DatetimeField;
+use SilverStripe\Forms\ToggleCompositeField;
+use SilverStripe\Forms\TreeDropdownField;
+use SilverStripe\ORM\DataExtension;
+use SilverStripe\Forms\FieldList;
+use SilverStripe\Forms\LiteralField;
+use SilverStripe\ORM\ValidationResult;
+
+class SlideImageEx extends DataExtension
+{
+      private static $db = [
+        'Hide' => 'Boolean(0)',
+        'DateOn' => 'Datetime',
+        'DateOff' => 'Datetime',
+    ];
+
+     private $_cache = [
+         'element' => [],
+     ];
+
+     public function getElement()
+    {
+        if(!isset($this->_cache['element'][$this->owner->ID])) {
+            $this->_cache['element'][$this->owner->ID] = $this->owner->SlideshowElement();
+        }
+
+        return $this->_cache['element'][$this->owner->ID];
+    }
+
+
+    public function ImageURL()
+    {
+        $el = $this->getElement();
+        $img = $this->owner->Image();
+
+        if(!$img) {
+            return null;
+        }
+
+        if($el->getField('ImageOriginalSize')){
+            return $img->Link();
+        }
+
+        return $img->FocusFill($this->getSlideWidth(), $this->getSlideHeight())->Link();
+    }
+
+    public function getSlideWidth()
+    {
+        $element = $this->getElement();
+        if(!$element->ID) {
+        	return SliderElement::config()->get('slide_width');
+        }
+
+        return $element->getSlideWidth();
+    }
+
+    public function getSlideHeight()
+    {
+        $element = $this->getElement();
+        if(!$element->ID) {
+        	return SliderElement::config()->get('slide_height');
+        }
+
+        return $element->getSlideHeight();
+    }
+
+    public function updateCMSFields(FieldList $fields)
+    {
+        parent::updateCMSFields($fields);
+
+        $fields->removeByName([
+            'PageLinkID',
+            'Hide',
+            'DateOn',
+            'DateOff',
+        ]);
+
+
+        $fields->dataFieldByName('Image')
+            ->setTitle('Image ('.$this->getSlideWidth().' x '.$this->getSlideHeight().' px)');
+
+        $fields->addFieldToTab('Root.Main', ToggleCompositeField::create(
+            'ConfigHD',
+            'Slide Settings',
+            [
+                CheckboxField::create('Hide', 'Hide this slide? (That will hide the slide regardless of start/end fields)'),
+                DatetimeField::create('DateOn', 'When would you like to start showing the slide?'),
+                DatetimeField::create('DateOff', 'When would you like to stop showing the slide?'),
+            ]
+        ));
+    }
+
+    public function validate(ValidationResult $validationResult)
+    {
+        if (!$this->owner->Name) {
+            $this->owner->Name = rand();
+        }
+    }
+}

templates/A2nt/ElementalBasics/Elements/SliderElement.ss

@@ -9,7 +9,20 @@
 
 <% if $SlideShow %>
 <div class="element__content">
-    <div id="Carousel{$ID}" class="element__carousel carousel slide js-carousel"<% if $SlideShow.count > 1 %><% if $Interval %> data-bs-interval="$Interval"<% end_if %> data-bs-indicators="true" data-bs-arrows="true"<% end_if %>>
+    <div
+        id="Carousel{$ID}"
+        class="element__carousel carousel slide js-carousel
+        <% if $SlidesInRow > 1 %>
+            carousel-multislide
+        <% end_if %>"
+        <% if $SlidesInRow > 1 %>
+            data-length="{$SlidesInRow}"
+        <% end_if %>
+        <% if $SlideShow.count > 1 %>
+            <% if $Interval %> data-bs-interval="$Interval"<% end_if %>
+            data-bs-indicators="true" data-bs-arrows="true"
+        <% end_if %>
+    >
         <div class="carousel-inner">
             <% loop $SlideShow %>
                 <div class="carousel-item carousel-item-{$SlideType}<% if no $Controls %> carousel-item-nocontrols<% end_if %><% if $First %> active<% end_if %>">