moved image-wrapper element out of picture tag in picture template

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.2.0] - 2018-07-11
+
+### Changes
+- moved `image-wrapper` out of picture element in `picture_lazyload.html5` template to restore functionality for source elements
+
+> Caution: May lead to broken css styles!
+
 ## [1.1.3] - 2018-04-26
 
 ### Fixed

src/Resources/contao/templates/picture/picture_lazyload.html5

@@ -1,23 +1,22 @@
+<div class="image-wrapper" style="padding-bottom: <?= $this->img['width'] == 0 ? 0 : number_format($this->img['height'] / $this->img['width'] * 100, 2, '.', ',') ?>%">
 <?php if ($this->sources): ?>
-  <picture>
-    <!--[if IE 9]><video style="display: none;"><![endif]-->
-    <?php foreach ($this->sources as $source): ?>
-      <source data-srcset="<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
-    <?php endforeach; ?>
-    <!--[if IE 9]></video><![endif]-->
+    <picture>
+        <!--[if IE 9]><video style="display: none;"><![endif]-->
+        <?php foreach ($this->sources as $source): ?>
+            <source data-srcset="<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
+        <?php endforeach; ?>
+        <!--[if IE 9]></video><![endif]-->
 <?php endif; ?>
+        <img class="image" data-lazy="<?= $this->img['src'] ?>" data-src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' data-srcset="' . $this->img['srcset'] . '"'; ?><?php if (!empty($this->img['sizes'])) echo ' sizes="' . $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' . $this->img['width'] . '" height="' . $this->img['height'] . '"'; ?>alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' . trim($this->class. ' ' . $this->img['class']) . '"'; ?><?= $this->attributes ?>itemprop="image">
 
-    <div class="image-wrapper" style="padding-bottom: <?= $this->img['width'] == 0 ? 0 : number_format($this->img['height'] / $this->img['width'] * 100, 2, '.', ',') ?>%">
-        <img class="image" data-lazy="<?= $this->img['src'] ?>" data-src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' data-srcset="' . $this->img['srcset'] . '"'; ?><?php if (!empty($this->img['sizes'])) echo ' sizes="' . $this->img['sizes'] . '"'; elseif (!$this->sources && !empty($this->img['width']) && !empty($this->img['height'])) echo ' width="' . $this->img['width'] . '" height="' . $this->img['height'] . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?php if ($this->class || !empty($this->img['class'])) echo ' class="' . trim($this->class. ' ' . $this->img['class']) . '"'; ?><?= $this->attributes ?> itemprop="image">
-      </div>
-<?php if ($this->sources): ?>
-  </picture>
+        <?php if ($this->sources): ?>
+    </picture>
 <?php endif; ?>
-
+</div>
 <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
-  <script>
-    window.respimage && window.respimage({
-      elements: [document.images[document.images.length - 1]]
-    });
-  </script>
+    <script>
+        window.respimage && window.respimage({
+            elements: [document.images[document.images.length - 1]]
+        });
+    </script>
 <?php endif; ?>