new file mode 100644

@@ -0,0 +1,10 @@

+.slick-slider-slide {

+  position: relative; }

+  .slick-slider-slide .slick-slider-slide-image {

+    position: absolute;

+    left: 0;

+    right: 0;

+    top: 0;

+    bottom: 0; }

+

+/*# sourceMappingURL=slick-addons.css.map */

new file mode 100644

@@ -0,0 +1,11 @@

+.slick-slider-slide {

+  position: relative;

+

+  .slick-slider-slide-image {

+    position: absolute;

+    left: 0;

+    right: 0;

+    top: 0;

+    bottom: 0;

+  }

+}

\ No newline at end of file

@@ -30,7 +30,7 @@ $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderSlideStop'] = '{type_le

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderWallpaper'] = '{type_legend},type;{slickSlider_legend},eSM_slick_text,eSM_slick_url,singleSRC,size;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

-$GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addImage'] = 'singleSRC,size';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addImage'] = 'singleSRC,size,eSM_slick_slide_bgSize,eSM_slick_slide_bgPosition,eSM_slick_slide_minHeight,eSM_slick_slide_bgOpacity';

 /**

  * Add fields to tl_content

@@ -179,6 +179,72 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['eSM_addImage'] = array

   'sql'                     => "char(1) NOT NULL default ''"

 );

+$GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_minHeight'] = array

+(

+  'label'                   => &$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_minHeight'],

+  'exclude'                 => true,

+  'inputType'               => 'checkbox',

+  'eval'                    => array('tl_class'=>'w50 m12'),

+  'sql'                     => "char(1) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_bgPosition'] = array

+(

+  'label'                   => &$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgPosition'],

+  'exclude'                 => true,

+  'inputType'               => 'select',

+  'options'                 => array

+  (

+    '0 0' => 'Links | Oben',

+    '50% 0' => 'Mitte | Oben',

+    '100% 0' => 'Rechts | Oben',

+    '0 50%' => 'Links | Mitte',

+    '50% 50%' => 'Mitte | Mitte',

+    '100% 50%' => 'Rechts | Mitte',

+    '0 100%' => 'Links | Unten',

+    '50% 100%' => 'Mitte | Unten',

+    '100% 100%' => 'Rechts | Unten',

+  ),

+  'eval'                    => array('tl_class' => 'w50','includeBlankOption'=>true),

+  'sql'                     => "varchar(16) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_bgSize'] = array

+(

+  'label'                   => &$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgSize'],

+  'exclude'                 => true,

+  'inputType'               => 'select',

+  'options'                 => array

+  (

+    'contain' => 'Proportional',

+    '100% 100%' => 'Verzerrt',

+    'auto auto' => 'Originalgröße',

+  ),

+  'eval'                    => array('tl_class' => 'w50','includeBlankOption'=>true,'blankOptionLabel'=>'Beschnitten'),

+  'sql'                     => "varchar(16) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_bgOpacity'] = array

+(

+  'label'                   => &$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgOpacity'],

+  'exclude'                 => true,

+  'inputType'               => 'select',

+  'options'                 => array

+  (

+    '10' => '10%',

+    '20' => '20%',

+    '30' => '30%',

+    '40' => '40%',

+    '50' => '50%',

+    '60' => '60%',

+    '70' => '70%',

+    '80' => '80%',

+    '90' => '90%',

+    '100' => '100%',

+  ),

+  'eval'                    => array('tl_class' => 'w50','includeBlankOption'=>true),

+  'sql'                     => "varchar(16) NOT NULL default ''"

+);

 class tl_content_eSM_slick extends Backend

 {

@@ -50,6 +50,28 @@ class ContentSlickSliderSlideStart extends \ContentElement

         $this->addImageToTemplate($this->Template, array('singleSRC'=>$this->singleSRC, 'size'=>$this->size));

       }

+

+      $backgroundStyle = 'background-image: url(\''.$this->Template->src.'\');';

+

+      if ($this->eSM_slick_slide_bgSize) {

+        $backgroundStyle .= 'background-size: ' . $this->eSM_slick_slide_bgSize . ';';

+      } else {

+        $backgroundStyle .= 'background-size: cover;';

+      }

+      if ($this->eSM_slick_slide_bgPosition) {

+        $backgroundStyle .= 'background-position: ' . $this->eSM_slick_slide_bgPosition . ';';

+      } else {

+        $backgroundStyle .= 'background-position: 0 0;';

+      }

+      if ($this->eSM_slick_slide_bgOpacity) {

+        $backgroundStyle .= 'opacity:' . $this->eSM_slick_slide_bgOpacity/100 . ';';

+      }

+

+      if ($this->eSM_slick_slide_minHeight) {

+        $this->Template->minHeight = round($this->Template->height/$this->Template->width*100).'%';

+      }

+

+      $this->Template->backgroundStyle = $backgroundStyle;

     }

   }

@@ -38,6 +38,14 @@ $GLOBALS['TL_LANG']['tl_content']['eSM_slick_adaptiveHeight'][0] = "Adaptive Hö

 $GLOBALS['TL_LANG']['tl_content']['eSM_slick_adaptiveHeight'][1] = "Die Höhe des Sliders passt sich automatisch den sichtbaren Slides an.";

 $GLOBALS['TL_LANG']['tl_content']['eSM_slick_text'][0]           = "Text";

 $GLOBALS['TL_LANG']['tl_content']['eSM_slick_text'][1]           = "Ein Text der auf dem Hintergrundbild platziert wird.";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgPosition'][0]           = "Bildposition";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgPosition'][1]           = "Legt die Positionierung des Bildes fest.";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgSize'][0]           = "Hintergrundbildgröße";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgSize'][1]           = "Steuert die Hintergrundbildgröße bezogen auf den Container.";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_minHeight'][0]           = "Mindesthöhe erzwingen";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_minHeight'][1]           = "Die Mindesthöhe des Slide wird am Bild ausgerichtet.";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgOpacity'][0]           = "Hintergrundbildtransparenz";

+$GLOBALS['TL_LANG']['tl_content']['eSM_slick_slide_bgOpacity'][1]           = "Die Transparenz des Hintergrundbildes.";

 /**

  * Legends

  */

@@ -1,7 +1,13 @@

 <?php //$this->dumpTemplateVars(); ?>

 <?php $this->block('content'); ?>

-      <div class="slick-slider-slide"<?php if ($this->eSM_addImage && $this->src): ?> style="background-image: url('<?= $this->src ?>'); min-height: <?= round($this->height/$this->width*100) ?>vw;"<?php endif; ?>>

+      <div class="slick-slider-slide slide_<?= $this->id ?>">

+        <?php if ($this->eSM_addImage && $this->src): ?>

+        <div class="slick-slider-slide-image" style="<?= $this->backgroundStyle ?>"></div>

+          <?php if ($this->minHeight): ?>

+          <style>.slide_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $this->minHeight ?>; float: left; }</style>

+          <?php endif; ?>

+        <?php endif; ?>

         <div class="slide-content">

 <?php $this->endblock(); ?>

@@ -2,6 +2,7 @@

 $GLOBALS['TL_CSS'][] = '/system/modules/eSM_slick/assets/lib/slick/'.$GLOBALS['TL_ASSETS']['SLICKSLIDER'].'/css/slick.css';

 $GLOBALS['TL_CSS'][] = '/system/modules/eSM_slick/assets/lib/slick/'.$GLOBALS['TL_ASSETS']['SLICKSLIDER'].'/css/slick-theme.css';

+$GLOBALS['TL_CSS'][] = '/system/modules/eSM_slick/assets/css/slick-addons.css';

 ?>

@@ -24,7 +25,7 @@ $GLOBALS['TL_CSS'][] = '/system/modules/eSM_slick/assets/lib/slick/'.$GLOBALS['T

                 speed: parseInt(c[1]),

                 initialSlide: parseInt(c[2]),

                 lazyLoad: c[3],

-                cssEase: 'linear',

+                cssEase: 'ease',

                 slidesToShow: parseInt(c[9]),

                 slidesToScroll: parseInt(c[10]),

                 adaptiveHeight: (parseInt(c[11]) == 1 ? true : false)