@@ -11,3 +11,4 @@

 $GLOBALS['TL_LANG']['MOD']['eSM_team'] = array('Team','Verwaltung der Teamseite');

 $GLOBALS['TL_LANG']['FMD']['teamlist'] = array('Teamübersicht','Teammitglieder auflisten');

 $GLOBALS['TL_LANG']['FMD']['team'] = 'Team';

+$GLOBALS['TL_LANG']['CTE']['featured'] = 'Featured-Block';

@@ -1735,4 +1735,116 @@ $shadow-color: #fff;

     }

   }

-}

\ No newline at end of file

+}

+

+

+/******************

+ * Featured Block

+ ******************/

+.feature-wrapper {

+

+  &.-valign-center {

+    min-height: 100vh;

+    display: flex;

+    flex-direction: column;

+    justify-content: flex-start;

+

+    .feature-wrapper-boundary {

+      width: 100%;

+    }

+

+    /*> .background-wrapper-helper {

+      display: flex;

+      align-items: center;

+      height: 100%;

+      width: 100%;

+

+      > .background-wrapper-inner {

+        flex: 0 0 auto;

+        width: 100%;

+      }

+    }*/

+  }

+

+  .feature-wrapper-boundary {

+    @include centered()

+  }

+

+  .feature-wrapper-cols {

+    display: flex;

+    align-items: stretch;

+

+    .media-col,

+    .content-col {

+      flex: 0 1 50%;

+    }

+  }

+

+  .media-col-content {

+    display: flex;

+    flex-direction: column;

+

+    > * {

+      width: 100%;

+      flex: 0 0 auto;

+    }

+

+    .feature-video,

+    .feature-image {

+      picture,

+      img,

+      video {

+        /*position: absolute;

+        left: 0;

+        top: 0;

+        right: 0;

+        bottom: 0;*/

+        min-height: 50vh;

+        max-height: 66.666vh;

+      }

+    }

+

+    .feature-image {

+      flex: 1 1 auto;

+    }

+

+    .feature-video {

+      object-fit: cover;

+      font-family: 'object-fit: cover';

+    }

+

+    .feature-link {

+      a {

+        font-size: 1.25em;

+        text-transform: uppercase;

+        font-weight: 700;

+        font-family: $font-family-alternate;

+        letter-spacing: 0.05em;

+

+        &:before {

+          content: '';

+          width: .5em;

+          height: 1em;

+          display: inline-block;

+          position: relative;

+          background: $color-link;

+          background: currentColor;

+          -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");

+          mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E");

+          -webkit-mask-repeat: no-repeat;

+          mask-repeat: no-repeat;

+          vertical-align: middle;

+          margin-right: 10px;

+          @include transition(all 0.2s ease);

+        }

+

+        &:hover {

+          &:before {

+            background: mix($color-link,#000,80%);

+            @include transform(translateX(5px));

+          }

+        }

+      }

+    }

+  }

+}

@@ -32,12 +32,20 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null)

                 'options' => [

                     'attr' => [

                         'class' => 'feature-image',

+                    ],

+                    'picture_attr' => [

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

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

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

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

+                    ],

+                    'img_attr' => [

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

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

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

                     ]

                 ]

-            ]

+            ],

+            '@ContaoCore/Image/Studio/figure.html.twig'

         );

     } else

     {

@@ -49,20 +57,29 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null)

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

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

+    <div class="feature-wrapper-boundary">

+        <div class="feature-wrapper-cols">

+            <div class="media-col">

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

+                    <div class="media-col-content">

+                        <div class="feature-video">

+                            <video autoplay muted loop playsinline>

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

+                            </video>

+                        </div>

+                    </div>

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

+                    <div class="media-col-content">

+                        <?= $figure ?>

+                        <?php if ($this->featureLink && $this->linkUrl): ?>

+                            <div class="feature-link">

+                                <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><?= $this->linkLabel ?></a>

+                            </div>

+                        <?php endif; ?>

+                    </div>

+                <?php endif ?>

+            </div>

-  <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; ?>">

+            <div class="content-col">

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

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

@@ -3,6 +3,7 @@

 return array(

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

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

+    'contentCategory' => 'featured',

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

     'wrapper' => array(

         'type' => 'start',

@@ -87,7 +88,7 @@ return array(

         'linkLabel' => array(

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

             'inputType' => 'text',

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

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

             'dependsOn' => array(

                 'field' => 'featureLink'

             )

@@ -95,7 +96,7 @@ return array(

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

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

             'dependsOn' => array(

                 'field' => 'featureLink'

             )

@@ -167,4 +168,4 @@ return array(

             'inputType' => 'standardField'

         ),

     ),

-);

\ No newline at end of file

+);

new file mode 100644

@@ -0,0 +1,9 @@

+

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

+                </div>

+            </div>

+

+        </div>

+    </div>

+</div>

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

new file mode 100644

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

+<?php

+

+return array(

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

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

+    'contentCategory' => 'featured',

+	'wrapper' => array(

+		'type' => 'stop',

+	),

+	'fields' => array(),

+);