@@ -1,5 +1,12 @@

+.slick-slider-container {

+  overflow: hidden; }

+

+.slick-slider-container,

 .slick-slider-slide {

   position: relative; }

+  .slick-slider-container .slick-slider-background,

+  .slick-slider-container .slick-slider-slide-image,

+  .slick-slider-slide .slick-slider-background,

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

     position: absolute;

     left: 0;

@@ -1,6 +1,11 @@

+.slick-slider-container {

+  overflow: hidden;

+}

+.slick-slider-container,

 .slick-slider-slide {

   position: relative;

+  .slick-slider-background,

   .slick-slider-slide-image {

     position: absolute;

     left: 0;

@@ -23,14 +23,14 @@ $GLOBALS['TL_DCA']['tl_content']['config']['onsubmit_callback'][] = array('tl_co

  * Add palettes to tl_content

  */

 $GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'eSM_addImage';

-$GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderStart'] = '{type_legend},type;{slickSlider_legend},eSM_slick_autoPlaySpeed,eSM_slick_speed,eSM_slick_initialSlide,eSM_slick_lazyLoad,eSM_slick_slidesToShow,eSM_slick_slidesToScroll,eSM_slick_infinite,eSM_slick_arrows,eSM_slick_pagination,eSM_slick_pause,eSM_slick_fade,eSM_slick_adaptiveHeight;{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']['palettes']['slickSliderStart'] = '{type_legend},type;{slickSlider_legend},eSM_slick_autoPlaySpeed,eSM_slick_speed,eSM_slick_initialSlide,eSM_slick_lazyLoad,eSM_slick_slidesToShow,eSM_slick_slidesToScroll,eSM_slick_infinite,eSM_slick_arrows,eSM_slick_pagination,eSM_slick_pause,eSM_slick_fade,eSM_slick_adaptiveHeight;{image_legend},eSM_addImage;{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']['palettes']['slickSliderStop'] = '{type_legend},type;{template_legend:hide},customTpl;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderSlideStart'] = '{type_legend},type;{slickSlider_legend},eSM_addImage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

 $GLOBALS['TL_DCA']['tl_content']['palettes']['slickSliderSlideStop'] = '{type_legend},type;{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';

 $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,eSM_slick_slide_bgSize,eSM_slick_slide_bgPosition,eSM_slick_slide_minHeight,eSM_slick_slide_bgOpacity';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['eSM_addImage'] = 'singleSRC,size,eSM_slick_bgSize,eSM_slick_bgPosition,eSM_slick_minHeight,eSM_slick_bgOpacity';

 /**

  * Add fields to tl_content

@@ -179,18 +179,18 @@ $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

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

 (

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

+  'label'                   => &$GLOBALS['TL_LANG']['tl_content']['eSM_slick_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

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

 (

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

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

   'exclude'                 => true,

   'inputType'               => 'select',

   'options'                 => array

@@ -209,9 +209,9 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_bgPosition'] = array

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

 );

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

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

 (

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

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

   'exclude'                 => true,

   'inputType'               => 'select',

   'options'                 => array

@@ -224,9 +224,9 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['eSM_slick_slide_bgSize'] = array

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

 );

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

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

 (

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

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

   'exclude'                 => true,

   'inputType'               => 'select',

   'options'                 => array

@@ -53,21 +53,21 @@ class ContentSlickSliderSlideStart extends \ContentElement

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

-      if ($this->eSM_slick_slide_bgSize) {

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

+      if ($this->eSM_slick_bgSize) {

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

       } else {

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

       }

-      if ($this->eSM_slick_slide_bgPosition) {

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

+      if ($this->eSM_slick_bgPosition) {

+        $backgroundStyle .= 'background-position: ' . $this->eSM_slick_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_bgOpacity) {

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

       }

-      if ($this->eSM_slick_slide_minHeight) {

+      if ($this->eSM_slick_minHeight) {

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

       }

@@ -42,5 +42,41 @@ class ContentSlickSliderStart extends \ContentElement

 		// Slider configuration

 		$this->Template->config = $this->eSM_slick_autoPlaySpeed . ',' . $this->eSM_slick_speed . ',' . $this->eSM_slick_initialSlide . ',' . $this->eSM_slick_lazyLoad . ',' . $this->eSM_slick_infinite . ',' . $this->eSM_slick_arrows . ',' . $this->eSM_slick_pagination . ',' . $this->eSM_slick_pause . ',' . $this->eSM_slick_fade . ',' . $this->eSM_slick_slidesToShow . ',' . $this->eSM_slick_slidesToScroll . ',' . $this->eSM_slick_adaptiveHeight;

+

+		// Background image

+    if ($this->singleSRC)

+    {

+

+      $objFile = \FilesModel::findByUuid($this->singleSRC);

+

+      if ($objFile !== null && is_file(TL_ROOT . '/' . $objFile->path))

+      {

+        $this->singleSRC = $objFile->path;

+

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

+      }

+

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

+

+      if ($this->eSM_slick_bgSize) {

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

+      } else {

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

+      }

+      if ($this->eSM_slick_bgPosition) {

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

+      } else {

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

+      }

+      if ($this->eSM_slick_bgOpacity) {

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

+      }

+

+      if ($this->eSM_slick_minHeight) {

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

+      }

+

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

+    }

 	}

 }

@@ -38,14 +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.";

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

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

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

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

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

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

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

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

 /**

  * Legends

  */

@@ -1,9 +1,17 @@

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

-  <div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

+<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

-    <?php if ($this->headline): ?>

-    <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>

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

+  <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>

+  <?php endif; ?>

+

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

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

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

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

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

+      <?php endif; ?>

     <?php endif; ?>

     <div class="slick-slider-wrapper" data-config="<?= $this->config ?>">

@@ -4,4 +4,6 @@

   </div>

+</div>

+

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

\ No newline at end of file