see cl 1.9.0

heimrichhannot · Aug 22, 2019 · b266168 · b266168
1 parent b5e012f
commit b266168
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,20 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [1.9.0] - 2019-08-22
+
+### Added
+- `$GLOBALS['skipLazyLoad']` to avoid using lazy load for certain templates
+
 ## [1.8.5] - 2019-05-14
 
 ### Fixed
-* inherit `lazyload` in `picture` attributes properly from image attributes 
+- inherit `lazyload` in `picture` attributes properly from image attributes 
 
 ## [1.8.4] - 2019-04-25
 
 ### Fixed
-* w3c validator error in `picture_lazyload.html.twig` occured by lazyload technique, removed `tns-lazy-image` class and `data-lazy` support
+- w3c validator error in `picture_lazyload.html.twig` occured by lazyload technique, removed `tns-lazy-image` class and `data-lazy` support
 
 ## [1.8.3] - 2019-03-19
 

diff --git a/src/Resources/contao/templates/picture/picture_lazyload.html5 b/src/Resources/contao/templates/picture/picture_lazyload.html5
@@ -1,40 +1,66 @@
-<?php $wrapperID = 'image-wrapper-' . mt_rand(); ?>
-<div id="<?= $wrapperID; ?>" class="image-wrapper<?php if ($this->class || !empty($this->img['class'])) echo ' '. trim($this->class. ' ' . $this->img['class']); ?>">
-    <?php $wrapperStyles[] = ('#' . $wrapperID . ':not(.loaded){max-width:' . ($this->img['width'] == 0 ? 'none' : ($this->img['width'] . 'px')) .  ';max-height:'.($this->img['height'] == 0 ? 'none' : ($this->img['height'] . 'px')).'}'); ?>
-    <?php $wrapperStyles[] = ('#' . $wrapperID . ':not(.loaded) .image-aspect-ratio{padding-bottom:' . ($this->img['width'] == 0 ? 0 : (number_format(($this->img['height'] / $this->img['width']) * 100, 2, '.', ',') . '%')) . '}'); ?>
-    <div class="image-aspect-ratio">
+<?php if (isset ($GLOBALS['skipLazyLoad']) && $GLOBALS['skipLazyLoad'] === true): ?>
+    <?php $GLOBALS['skipLazyLoad'] = false; ?>
+
     <?php if ($this->sources): ?>
         <picture>
             <!--[if IE 9]><video style="display: none;"><![endif]-->
             <?php foreach ($this->sources as $source): ?>
-                <source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" data-srcset="{{env::url}}/<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
-                <?php if($source['media']): ?>
-                    <?php $wrapperStyles[] = ('@media ' . $source['media'] . '{#' . $wrapperID . ':not(.loaded){max-width:' . ($source['width'] == 0 ? 'none' : ($source['width'] . 'px')) . ';max-height:'.($source['height'] == 0 ? 'none' : ($source['height'] . 'px')).'}}'); ?>
-                    <?php $wrapperStyles[] = ('@media ' . $source['media'] . '{#' . $wrapperID . ':not(.loaded) .image-aspect-ratio{padding-bottom:' . ($source['width'] == 0 ? 0 : (number_format(($source['height'] / $source['width']) * 100, 2, '.', ',') . '%')) . '}}'); ?>
-                <?php endif; ?>
+                <source 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 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" data-wrapper="#<?= $wrapperID; ?>" data-wrapper-style="<?= implode('', $wrapperStyles); ?>" class="image lazy-img" data-src="{{env::url}}/<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' data-srcset="{{env::url}}/' . $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="' . trim($this->img['width']) . '" height="' . trim($this->img['height']) . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?= $this->attributes ?> itemprop="image">
+
+            <img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' 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">
+
             <?php if ($this->sources): ?>
         </picture>
     <?php endif; ?>
-    <noscript>
-        <?php if ($this->sources): ?>
+
+    <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
+        <script>
+            window.respimage && window.respimage({
+                elements: [document.images[document.images.length - 1]]
+            });
+        </script>
+    <?php endif; ?>
+<?php else: ?>
+    <?php $wrapperID = 'image-wrapper-' . mt_rand(); ?>
+    <div id="<?= $wrapperID; ?>" class="image-wrapper<?php if ($this->class || !empty($this->img['class'])) echo ' '. trim($this->class. ' ' . $this->img['class']); ?>">
+        <?php $wrapperStyles[] = ('#' . $wrapperID . ':not(.loaded){max-width:' . ($this->img['width'] == 0 ? 'none' : ($this->img['width'] . 'px')) .  ';max-height:'.($this->img['height'] == 0 ? 'none' : ($this->img['height'] . 'px')).'}'); ?>
+        <?php $wrapperStyles[] = ('#' . $wrapperID . ':not(.loaded) .image-aspect-ratio{padding-bottom:' . ($this->img['width'] == 0 ? 0 : (number_format(($this->img['height'] / $this->img['width']) * 100, 2, '.', ',') . '%')) . '}'); ?>
+        <div class="image-aspect-ratio">
+            <?php if ($this->sources): ?>
             <picture>
-        <?php endif; ?>
-        <img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' 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">
-        <?php if ($this->sources): ?>
+                <!--[if IE 9]><video style="display: none;"><![endif]-->
+                <?php foreach ($this->sources as $source): ?>
+                    <source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" data-srcset="{{env::url}}/<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])) echo ' sizes="' . $source['sizes'] . '"'; ?><?php if (!empty($source['media'])) echo ' media="' . $source['media'] . '"'; ?>>
+                    <?php if($source['media']): ?>
+                        <?php $wrapperStyles[] = ('@media ' . $source['media'] . '{#' . $wrapperID . ':not(.loaded){max-width:' . ($source['width'] == 0 ? 'none' : ($source['width'] . 'px')) . ';max-height:'.($source['height'] == 0 ? 'none' : ($source['height'] . 'px')).'}}'); ?>
+                        <?php $wrapperStyles[] = ('@media ' . $source['media'] . '{#' . $wrapperID . ':not(.loaded) .image-aspect-ratio{padding-bottom:' . ($source['width'] == 0 ? 0 : (number_format(($source['height'] / $source['width']) * 100, 2, '.', ',') . '%')) . '}}'); ?>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+                <!--[if IE 9]></video><![endif]-->
+                <?php endif; ?>
+                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=" data-wrapper="#<?= $wrapperID; ?>" data-wrapper-style="<?= implode('', $wrapperStyles); ?>" class="image lazy-img" data-src="{{env::url}}/<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' data-srcset="{{env::url}}/' . $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="' . trim($this->img['width']) . '" height="' . trim($this->img['height']) . '"'; ?> alt="<?= $this->alt ?>"<?php if ($this->title) echo ' title="' . $this->title . '"'; ?><?= $this->attributes ?> itemprop="image">
+                <?php if ($this->sources): ?>
             </picture>
         <?php endif; ?>
-    </noscript>
+            <noscript>
+                <?php if ($this->sources): ?>
+                <picture>
+                    <?php endif; ?>
+                    <img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']) echo ' 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">
+                    <?php if ($this->sources): ?>
+                </picture>
+            <?php endif; ?>
+            </noscript>
+        </div>
     </div>
-</div>
-<?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
-    <script>
-        window.respimage && window.respimage({
-            elements: [document.images[document.images.length - 1]]
-        });
-    </script>
-<?php endif; ?>
-
+    <?php if ($this->sources || $this->img['src'] !== $this->img['srcset']): ?>
+        <script>
+            window.respimage && window.respimage({
+                elements: [document.images[document.images.length - 1]]
+            });
+        </script>
+    <?php endif; ?>
+<?php endif; ?>