new file mode 100644

@@ -0,0 +1,24 @@

+# EditorConfig is awesome: http://EditorConfig.org

+

+# top-most EditorConfig file

+root = true

+

+# Unix-style newlines with a newline ending every file

+[*]

+end_of_line = lf

+insert_final_newline = true

+trim_trailing_whitespace = true

+

+[*.{php,twig,yml}]

+indent_style = space

+indent_size = 4

+

+[*.{svg,min.css,min.js}]

+insert_final_newline = false

+

+[*/src/Resources/contao/**.{css,js,php}]

+indent_style = tab

+

+[*/src/Resources/contao/**.html5]

+indent_style = space

+indent_size = 2

\ No newline at end of file

@@ -179,8 +179,9 @@

 /**

  * Object Fit

  */

-@mixin object-fit($mode: cover) {

+@mixin object-fit($mode: cover, $position: 50% 50%) {

   object-fit: $mode;

+  object-position: $position;

   font-family: 'object-fit: #{$mode};';

   display: block;

   width: 100%;

@@ -1556,4 +1556,183 @@ $shadow-color: #fff;

       }

     }

   }

+}

+

+/**

+ * PHOTO / TEXT COMBI

+ */

+.photo-text-wrapper {

+  position: relative;

+

+  .photo-text-wrapper-background {

+    @extend .background-wrapper-background;

+  }

+

+  &.-valign-center {

+    min-height: 100vh;

+    display: flex;

+    flex-direction: column;

+    justify-content: center;

+    > .text-wall {

+      flex: 0 0 auto;

+      width: 100%;

+    }

+

+    &.-valignTop {

+      justify-content: flex-start;

+    }

+    &.-valignBottom {

+      justify-content: flex-end;

+    }

+  }

+

+  .photo-wall {

+    position: absolute;

+    //margin-left: $gutter-default;

+    left: 50%-$gutter-default/2;

+    right: 0;

+    top: 0;

+    height: 100%;

+

+    &-content {

+      height: 100%;

+      overflow: hidden;

+      background: 50% 50% no-repeat;

+      background-size: cover;

+    }

+  }

+  .text-wall {

+    @include centered-1200;

+

+    &-content {

+      max-width: 50%;

+      margin-right: auto;

+      -webkit-box-sizing: border-box;

+      -moz-box-sizing: border-box;

+      box-sizing: border-box;

+      padding-right: 75px;

+

+      .-bg-dark& {

+        &,

+        h1,h2,h3,h4,h5,h6 {

+          color: $color-text-invert;

+        }

+      }

+

+      &.-padding {

+        padding: $gutter-default*2 0;

+      }

+      &.-medium-padding {

+        padding: 50px 0;

+      }

+      &.-large-padding {

+        padding: 100px 0;

+      }

+

+      &.-padding-top {

+        padding: $gutter-default*2 0 0;

+      }

+      &.-medium-padding-top {

+        padding: 50px 0 0;

+      }

+      &.-large-padding-top {

+        padding: 100px 0 0;

+      }

+

+      &.-padding-bottom {

+        padding: 0 0 $gutter-default*2;

+      }

+      &.-medium-padding-bottom {

+        padding: 0 0 50px;

+      }

+      &.-large-padding-bottom {

+        padding: 0 0 100px;

+      }

+    }

+  }

+

+  &.-alt-color {

+    background-color: $color-bg-secondary;

+

+    /*&,

+    h1,h2,h3,h4,h5,h6 {

+      color: $color-headline-invert;

+    }*/

+  }

+

+  &.-bg-dark {

+    background-color: #000;

+  }

+

+  &.-text-right {

+    .photo-wall {

+      margin-left: 0;

+      margin-right: $gutter-default;

+      left: 0;

+      right: 50%-$gutter-default/2;

+    }

+

+    .text-wall {

+      &-content {

+        margin-right: 0;

+        margin-left: auto;

+        padding-right: 0;

+        padding-left: 75px;

+      }

+    }

+  }

+

+  @media screen and (max-width: 800px) {

+    .photo-wall {

+      margin-left: 60px;

+    }

+

+    .text-wall {

+      &-content {

+        padding-right: 0;

+      }

+    }

+

+    &.-text-right {

+      .photo-wall {

+        margin-right: 60px;

+      }

+

+      .text-wall {

+        &-content {

+          padding-left: 0;

+        }

+      }

+    }

+  }

+

+  @media screen and (max-width: 599px) {

+    .photo-wall {

+      position: relative;

+      right: auto;

+      left: auto;

+      top: auto;

+      margin: 0 0 15px;

+      padding: 15px 15px 0;

+    }

+

+    .photo-wall-content {

+      min-height: 66vw;

+    }

+

+    .text-wall {

+      &-content {

+        padding-right: 0;

+        max-width: none;

+      }

+    }

+

+    &.-text-right {

+      .photo-wall {

+        margin-right: 0;

+        right: 0;

+      }

+    }

+  }

+

 }

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,65 @@

+<?php

+$cssClasses = array(

+  'feature-wrapper',

+  'feature-wrapper_'.$this->id,

+  $this->class,

+);

+if ($this->contentPosition) {

+    $cssClasses[] = $this->contentPosition;

+}

+if ($this->valign) {

+    $cssClasses[] = $this->valign;

+}

+if ($this->valignCenter) {

+    $cssClasses[] = '-valign-center';

+}

+

+$figure = '';

+$blnIsVideo = false;

+if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null)

+{

+  if (in_array(

+    $file->extension,

+    array_map('trim', explode(',', \Config::get('validImageTypes')))

+  ))

+  {

+    $figure = $this->figure(

+      $file->uuid, $this->backgroundImageSize,

+      [

+        'options' => [

+          'attr' => [

+            'class' => 'feature-image',

+            'style' => "object-fit: $this->backgroundSize;" .

+                "object-position: $this->backgroundPosition;" .

+                "font-family: 'object-fit: $this->backgroundSize';"

+          ]

+        ]

+      ]

+    );

+  } else {

+    $blnIsVideo = !$blnIsVideo;

+  }

+}

+

+

+?>

+

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

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

+

+  <div class="photo-wall">

+  <?php if ($blnIsVideo && $file !== null): ?>

+    <div class="photo-wall-content">

+      <video class="no-mejs" autoplay loop>

+          <source src="<?php echo TL_FILES_URL . $file->path ?>" type="video/<?php echo $file->extension ?>">

+      </video>

+    </div>

+  <?php elseif ($figure !== null): ?>

+    <div class="photo-wall-content">

+      <?= $figure ?>

+    </div>

+  <?php endif ?>

+  </div>

+

+  <div class="text-wall"><div class="text-wall-content<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>">

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

new file mode 100644

@@ -0,0 +1,170 @@

+<?php

+// rsce_boxes_config.php

+return array(

+    'label' => array('Zentrierter Featured-Block Anfang →', 'Erzeugt einen zentrierten Feature-Block (z.B. Weinlinie)'),

+    'types' => array('content','module'),

+    'standardFields' => array('cssID', 'space'),

+    'wrapper' => array(

+        'type' => 'start',

+    ),

+    'fields' => array(

+        'content_set' => array(

+            'label' => array('Inhaltsspalte'),

+            'inputType' => 'group',

+        ),

+        'contentPosition' => array(

+            'label' => array('Position', 'Legt fest ob der Inhalt links oder rechts vom Bild positioniert ist.'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => 'Links',

+                '-text-right' => 'Rechts',

+            ),

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

+        ),

+        'image_set' => array(

+            'label' => array('Bildspalte'),

+            'inputType' => 'group',

+        ),

+        'backgroundImage' => array(

+            'label' => array('Bild oder Video', 'Wählen Sie ein Bild oder eine Videodatei aus.'),

+            'inputType' => 'fileTree',

+            'eval' => array(

+                'tl_class' => 'clr',

+                'multiple' => false,

+                'fieldType' => 'radio',

+                'filesOnly' => true,

+                'extensions' => \Config::get('validImageTypes') . ',mp4,webm,ogv,ogg',

+                'orderField'=>'orderSRC',

+//        'isGallery' => true,

+            ),

+        ),

+        'backgroundImageSize' => array(

+            'label' => array('Bildbreite und Bildhöhe', ''),

+            'inputType' => 'imageSize',

+            'options' => \System::getContainer()->get('contao.image.image_sizes')->getOptionsForUser(BackendUser::getInstance()),

+            'reference' => &$GLOBALS['TL_LANG']['MSC'],

+            'eval' => array(

+                'rgxp' => 'digit',

+                'tl_class' => 'w50',

+                'includeBlankOption' => true,

+            ),

+        ),

+        'backgroundSize' => array(

+            'label' => array('Bildanpassung', ''),

+            'inputType' => 'select',

+            'options' => array(

+                'cover' => 'Beschnitten',

+                'contain' => 'Proportional',

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

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

+            ),

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

+        ),

+        'backgroundPosition' => array(

+            'label' => array('Position', 'Bildausrichtung'),

+            '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'),

+        ),

+        'featureLink' => array(

+            'label' => array('Featurelink unter Bild', 'Stellt einen prominenten Link unterhalb des Bildes dar.'),

+            'inputType' => 'checkbox',

+            'eval' => array(

+                'tl_class' => 'w50 m12 clr',

+            ),

+        ),

+        'linkLabel' => array(

+            'label' => array('Link-Text', ''),

+            'inputType' => 'text',

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

+            'dependsOn' => array(

+                'field' => 'featureLink'

+            )

+        ),

+        'linkUrl' => array(

+            'label' => array('Link-URL', 'Beispiele: {{link_url::seitenalias}} (Alias, ID oder anderer Inserttag), http://example.com'),

+            'inputType' => 'url',

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

+            'dependsOn' => array(

+                'field' => 'featureLink'

+            )

+        ),

+        'linkTitle' => array(

+            'label' => array('Link-Titel', 'Wird beim hovern mit der Maus dargestellt.'),

+            'inputType' => 'text',

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

+            'dependsOn' => array(

+                'field' => 'featureLink'

+            )

+        ),

+        'newWindow' => array(

+            'label' => $GLOBALS['TL_LANG']['MSC']['target'],

+            'inputType' => 'checkbox',

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

+            'dependsOn' => array(

+                'field' => 'featureLink'

+            )

+        ),

+        'layout_set' => array(

+            'label' => array('Layoutoptionen'),

+            'inputType' => 'group',

+        ),

+        'padding' => array(

+            'label' => array('Innenabstand', 'Es wird Oben und Unten ein Innenabstand angewendet.'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => '-',

+                '-padding' => 'Default',

+                '-medium-padding' => 'Medium',

+                '-large-padding' => 'Large',

+                '-padding-top' => 'Small Top',

+                '-medium-padding-top' => 'Medium Top',

+                '-large-padding-top' => 'Large Top',

+                '-padding-bottom' => 'Small Bottom',

+                '-medium-padding-bottom' => 'Medium Bottom',

+                '-large-padding-bottom' => 'Large Bottom',

+            ),

+            'eval' => array(

+                'tl_class' => 'w50',

+            ),

+        ),

+        'valign' => array(

+            'label' => array('Vertikale Ausrichtung', 'Vertikale Ausrichtung (nur in Verbindung mit "Mind. Viewport Höhe").'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => 'Mitte',

+                '-valignTop' => 'Oben',

+                '-valignBottom' => 'Unten',

+            ),

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

+        ),

+        'valignCenter' => array(

+            'label' => array('Mind. Viewport Höhe', 'Der Inhaltsbereich hat mindestens die Höhe des Viewports. Der Inhalt wird zentriert dargestellt.'),

+            'inputType' => 'checkbox',

+            'eval' => array(

+                'tl_class' => 'w50 m12 clr',

+            ),

+        ),

+        'spacing' => array(

+            'label' => array('Abstand'),

+            'inputType' => 'group',

+        ),

+        'es_spacing' => array (

+            'inputType' => 'standardField'

+        ),

+        'es_padding' => array (

+            'inputType' => 'standardField'

+        ),

+    ),

+);

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,70 @@

+<?php

+$cssClasses = array(

+  'photo-text-wrapper',

+  'photo-text-wrapper_'.$this->id,

+  $this->class,

+);

+if ($this->textPosition) {

+    $cssClasses[] = $this->textPosition;

+}

+if ($this->valign) {

+    $cssClasses[] = $this->valign;

+}

+if ($this->valignCenter) {

+    $cssClasses[] = '-valign-center';

+}

+$imageFiles = array();

+$videoFiles = array();

+if (is_array($this->backgroundImage)) {

+  foreach (\FilesModel::findMultipleByUuids($this->backgroundImage) as $file) {

+    if (in_array(

+      $file->extension,

+      array_map('trim', explode(',', \Config::get('validImageTypes')))

+    )) {

+      $imageFiles[] = $file;

+    }

+    else {

+      $videoFiles[] = $file;

+    }

+  }

+}

+$imgColStyle = '';

+if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)) {

+  $imgColStyle .= 'background-image: url("' . $image->src . '");';

+}

+if ((count($imageFiles) || count($videoFiles)) && $this->backgroundSize) {

+  $imgColStyle .= 'background-size: ' . $this->backgroundSize . ';';

+}

+if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

+  $imgColStyle .= 'background-position: ' . $this->backgroundPosition . ';';

+}

+

+$style = '';

+if (!count($videoFiles) && !count($imageFiles)) {

+  $style .= $imgColStyle;

+}

+

+?>

+

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

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

+

+  <div class="photo-wall">

+  <?php if (count($videoFiles)): ?>

+    <div class="photo-wall-content">

+      <video class="no-mejs" autoplay loop <?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?> poster="<?php echo $image->src ?>"<?php endif ?>>

+        <?php foreach ($videoFiles as $video): ?>

+          <source src="<?php echo TL_FILES_URL . $video->path ?>" type="video/<?php echo $video->extension ?>">

+        <?php endforeach ?>

+        <?php if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>

+          <?php $this->insert('picture_default', $image->picture) ?>

+        <?php endif ?>

+      </video>

+    </div>

+  <?php elseif (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $this->backgroundImageSize)): ?>

+    <div class="photo-wall-content" style="<?php echo htmlspecialchars($imgColStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>

+  <?php endif ?>

+  </div>

+

+  <div class="text-wall"><div class="text-wall-content<?php if ($this->padding): ?> <?= $this->padding ?><?php endif; ?>">

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

new file mode 100644

@@ -0,0 +1,127 @@

+<?php

+// rsce_boxes_config.php

+return array(

+    'label' => array('Zentrierter Inhaltsbereich mit halbseitigem Bild Start', 'Erzeugt einen zentrierten Inhaltsbereich'),

+    'types' => array('content','module'),

+    'standardFields' => array('cssID', 'space'),

+    'wrapper' => array(

+        'type' => 'start',

+    ),

+    'fields' => array(

+        'text_set' => array(

+            'label' => array('Textspalte'),

+            'inputType' => 'group',

+        ),

+        'textPosition' => array(

+            'label' => array('Textposition', 'Legt fest ob der Text links oder rechts vom Bild positioniert ist.'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => 'Links',

+                '-text-right' => 'Rechts',

+            ),

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

+        ),

+        'image_set' => array(

+            'label' => array('Bildspalte'),

+            'inputType' => 'group',

+        ),

+        'backgroundImage' => array(

+            'label' => array('Bild oder Video', 'Wählen Sie ein Bild oder mehrere Videodateien aus.'),

+            'inputType' => 'fileTree',

+            'eval' => array(

+                'tl_class' => 'clr',

+                'multiple' => true,

+                'fieldType' => 'checkbox',

+                'filesOnly' => true,

+                'extensions' => \Config::get('validImageTypes') . ',mp4,webm,ogv,ogg',

+                'orderField'=>'orderSRC',

+//        'isGallery' => true,

+            ),

+        ),

+        'backgroundImageSize' => array(

+            'label' => array('Bildbreite und Bildhöhe', ''),

+            'inputType' => 'imageSize',

+            'options' => \System::getContainer()->get('contao.image.image_sizes')->getOptionsForUser(BackendUser::getInstance()),

+            'reference' => &$GLOBALS['TL_LANG']['MSC'],

+            'eval' => array(

+                'rgxp' => 'digit',

+                'tl_class' => 'w50',

+                'includeBlankOption' => true,

+            ),

+        ),

+        'backgroundSize' => array(

+            'label' => array('Bildanpassung', ''),

+            'inputType' => 'select',

+            'options' => array(

+                '' => 'Beschnitten',

+                'contain' => 'Proportional',

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

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

+            ),

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

+        ),

+        'backgroundPosition' => array(

+            'label' => array('Position', 'Nicht mit Parallax-Effekt kombinierbar'),

+            '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'),

+        ),

+        'padding' => array(

+            'label' => array('Innenabstand', 'Es wird Oben und Unten ein Innenabstand angewendet.'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => '-',

+                '-padding' => 'Default',

+                '-medium-padding' => 'Medium',

+                '-large-padding' => 'Large',

+                '-padding-top' => 'Small Top',

+                '-medium-padding-top' => 'Medium Top',

+                '-large-padding-top' => 'Large Top',

+                '-padding-bottom' => 'Small Bottom',

+                '-medium-padding-bottom' => 'Medium Bottom',

+                '-large-padding-bottom' => 'Large Bottom',

+            ),

+            'eval' => array(

+                'tl_class' => 'w50',

+            ),

+        ),

+        'valignCenter' => array(

+            'label' => array('Mind. Viewport Höhe', 'Der Inhaltsbereich hat mindestens die Höhe des Viewports. Der Inhalt wird zentriert dargestellt.'),

+            'inputType' => 'checkbox',

+            'eval' => array(

+                'tl_class' => 'w50 m12 clr',

+            ),

+        ),

+        'valign' => array(

+            'label' => array('Vertikale Ausrichtung', 'Vertikale Ausrichtung (nur in Verbindung mit "Mind. Viewport Höhe").'),

+            'inputType' => 'select',

+            'options' => array(

+                '' => 'Mitte',

+                '-valignTop' => 'Oben',

+                '-valignBottom' => 'Unten',

+            ),

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

+        ),

+        'spacing' => array(

+            'label' => array('Abstand'),

+            'inputType' => 'group',

+        ),

+        'es_spacing' => array (

+            'inputType' => 'standardField'

+        ),

+        'es_padding' => array (

+            'inputType' => 'standardField'

+        ),

+    ),

+);

\ No newline at end of file

new file mode 100644

@@ -0,0 +1,6 @@

+

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

+  </div></div>

+

+</div>

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

new file mode 100644

@@ -0,0 +1,13 @@

+<?php

+

+return array(

+	'label' => array(

+		'Zentrierter Inhaltsbereich mit halbseitigem Bild Ende',

+		'Beendet einen zentrierten Inhaltsbereich',

+	),

+	'types' => array('content', 'module'),

+	'wrapper' => array(

+		'type' => 'stop',

+	),

+	'fields' => array(),

+);