@@ -24,15 +24,20 @@ if ($this->height) {

 $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;

+  if (($files = \FilesModel::findMultipleByUuids($this->backgroundImage)) !== null)

+  {

+    foreach ($files as $file)

+    {

+      if (in_array(

+        $file->extension,

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

+      ))

+      {

+        $imageFiles[] = $file;

+      } else

+      {

+        $videoFiles[] = $file;

+      }

     }

   }

 }

@@ -66,7 +71,10 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

     </div>

   </div>

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

-  <div class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>

+  <?php /*<div class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>*/ ?>

+  <figure class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>">

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

+  </figure>

 <?php endif ?>

 <div class="content-wrapper hero-content">

@@ -90,5 +98,8 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

 <?php /* if ($minHeight): ?>

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

 <?php endif; */ ?>

+  <?php if ($this->height == '-bgimage' && !$this->playerAspect && isset($minHeight)): ?>

+    <style>.hero-wrapper_<?= $this->id ?>:before { content: ""; display: block; padding-top: <?= $minHeight ?>; width: 100%; }</style>

+  <?php endif; ?>

 </div>

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

@@ -41,10 +41,6 @@ if (count($imageFiles) && $image = $this->getImageObject($imageFiles[0]->uuid, $

   $minHeight = round(100/$image->arrSize[0]*$image->arrSize[1]).'%';

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

 }

-if (count($videoFiles))

-{

-  $objPage->cssClass = trim($objPage->cssClass . ' -hide-logo');

-}

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

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

 }

@@ -80,6 +80,11 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

   </div>

   <?php endif; ?>

 </div>

+    <?php if ($this->useHtml && $this->html): ?>

+    <div class="content-wrapper hero-html">

+        <?= $this->html ?>

+    </div>

+    <?php endif; ?>

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

   <svg class="arrow" xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 5' preserveAspectRatio='viewPort' ><polygon points="0,0 0,5 50,5 100,5 100,0 50,5" /></svg>

@@ -70,7 +70,7 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

     </div>

   </div>

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

-  <div class="hero-background" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>

+  <div class="hero-background<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>

 <?php endif ?>

 <div class="content-wrapper hero-content">

@@ -86,8 +86,8 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

 <?php endif; ?>

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

+<?php /* if ($minHeight): ?>

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

-<?php endif; ?>

+<?php endif; */ ?>

 </div>

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

@@ -74,10 +74,10 @@ if ((count($imageFiles) || count($videoFiles)) && $this->backgroundPosition) {

 <?php endif ?>

 <div class="content-wrapper hero-content">

-  <?php if ($this->text['value']): ?>

-  <<?= $this->text['unit'] ?> class="hero-text">

-    <?= $this->text['value'] ?>

-  </<?= $this->text['unit'] ?>>

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

+  <div class="hero-text">

+    <?= $this->text ?>

+  </div>

   <?php endif; ?>

 </div>

new file mode 100644

@@ -0,0 +1,93 @@

+<?php

+global $objPage;

+$cssClasses = array(

+  'hero-wrapper',

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

+  $this->class,

+);

+if ($this->colorVariation) {

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

+}

+if ($this->textPosition) {

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

+}

+if ($this->showArrow) {

+  $cssClasses[] = '-arrow';

+}

+if ($this->arrowAlternate) {

+  $cssClasses[] = '-arrow-alternate';

+}

+if ($this->height) {

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

+}

+

+$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;

+    }

+  }

+}

+$backgroundStyle = '';

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

+  $minHeight = round(100/$image->arrSize[0]*$image->arrSize[1]).'%';

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

+}

+if (count($videoFiles))

+{

+  $objPage->cssClass = trim($objPage->cssClass . ' -hide-logo');

+}

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

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

+}

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

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

+}

+

+?>

+

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

+<div class="<?php echo implode(' ', $cssClasses) ?>"<?php echo $this->cssID ?>>

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

+  <div class="hero-background video_container">

+    <div class="responsive<?= $this->playerAspect ? ' ratio-'.str_replace(':','',$this->playerAspect) : '' ?>">

+    <video class="no-mejs" autoplay muted loop playsinline<?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>

+  </div>

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

+  <div class="hero-background" style="<?php echo htmlspecialchars($backgroundStyle) ?>" data-image-url="<?php echo $image->src ?>"></div>

+<?php endif ?>

+

+<div class="content-wrapper hero-content">

+  <?php if ($this->text['value']): ?>

+  <<?= $this->text['unit'] ?> class="hero-text">

+    <?= $this->text['value'] ?>

+  </<?= $this->text['unit'] ?>>

+  <?php endif; ?>

+</div>

+

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

+  <svg class="arrow" xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 5' preserveAspectRatio='viewPort' ><polygon points="0,0 0,5 50,5 100,5 100,0 50,5" /></svg>

+<?php endif; ?>

+

+

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

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

+<?php endif; ?>

+</div>

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