From 3cdd02ed21a9292bca99e078f80665a49d132693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Sun, 26 Dec 2021 21:09:22 +0100
Subject: [PATCH] WIP Implement viewhelper for image lazyloading

---
 .../ViewHelpers/LazyLoadImageViewHelper.php   | 47 +++++++++++++++++++
 .../Resources/Private/Partials/Officetip.html | 13 ++---
 .../Private/Partials/Product/Teaser.html      | 12 +++--
 .../Private/Partials/RegionMaps.html          | 10 ++--
 .../Resources/Private/Partials/Teamer.html    |  8 ++--
 .../Private/Partials/TeaserImage.html         | 25 +++++-----
 6 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php

diff --git a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php
new file mode 100644
index 00000000..37387929
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php
@@ -0,0 +1,47 @@
+<?php
+
+namespace EP\EpTheme\ViewHelpers;
+
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper;
+
+class LazyLoadImageViewHelper extends ImageViewHelper
+{
+    public function initializeArguments()
+    {
+        parent::initializeArguments();
+        $this->registerArgument('loaderimg', 'string', '', false);
+    }
+
+    public function render(): string
+    {
+        parent::render();
+
+        $src = $this->tag->getAttribute('src');
+        $this->tag->removeAttribute('src');
+        $this->tag->addAttribute('data', ['src' => $src]);
+
+        if (isset($this->arguments['loaderimg'])) {
+            $loaderImage = $this->imageService->getImage($this->arguments['loaderimg'], null, false);
+            $processingInstructions = [
+                'width' => $this->arguments['width'],
+                'height' => $this->arguments['height'],
+                'minWidth' => $this->arguments['minWidth'],
+                'minHeight' => $this->arguments['minHeight'],
+                'maxWidth' => $this->arguments['maxWidth'],
+                'maxHeight' => $this->arguments['maxHeight'],
+            ];
+            $processedLoaderImage = $this->imageService->applyProcessingInstructions($loaderImage, $processingInstructions);
+            $loaderImageUri = $this->imageService->getImageUri($processedLoaderImage, $this->arguments['absolute']);
+            $this->tag->addAttribute('src', $loaderImageUri);
+        }
+
+        $classes = $this->tag->getAttribute('class');
+        $classItems = GeneralUtility::trimExplode(' ', $classes, true);
+        $classItems[] = 'lazyload';
+        $classes = implode(' ', array_unique($classItems));
+        $this->tag->addAttribute('class', $classes);
+
+        return $this->tag->render();
+    }
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
index 6d7845e2..f65ecb58 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
@@ -8,14 +8,11 @@
             </div>
             <div class="col-span-1">
                 <f:if condition="{officetip.author.image}">
-                    <f:then>
-                        <img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}"
-                             class="block w-full h-auto lazyload"
-                             alt="{officetip.author.name}">
-                    </f:then>
-                    <f:else>
-                        <img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}">
-                    </f:else>
+                    <ep:lazyLoadImage image="{officetip.author.image}"
+                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                      class="block w-full h-auto"
+                                      width="120"
+                                      alt="{officetip.author.name}" />
                 </f:if>
             </div>
             <div class="col-span-2">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 175e60c4..b58cd09d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -1,5 +1,6 @@
 <html data-namespace-typo3-fluid="true" lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:section name="Teaser">
@@ -13,11 +14,12 @@
         <div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
             <a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}{f:if(condition: referringPageUri, then: '?ref={referringPageUri -> f:format.urlencode()}')}"
                title="{region.name} {product.name} Details und Buchen">
-                <img class="block w-full h-full object-cover lazyload"
-                     src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '360', height: '270')}"
-                     data-src="{f:uri.image(image: productImage, width: '360c', height: '270c')}"
-                     alt="{product.name}"
-                     width="360" height="270" />
+                <ep:lazyLoadImage image="{productImage}"
+                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                  class="block w-full h-full object-cover"
+                                  width="360c"
+                                  height="270c"
+                                  alt="{product.name}" />
             </a>
             <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-overlay', else: 'bg-ep-primary-80')}">
                 <div class="flex items-center space-x-2">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
index 734266a7..a89168b3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
@@ -11,10 +11,12 @@
                data-lightbox-index="{iteration.cycle}"
                data-lightbox-caption="Pistenplan {region.name}"
                title="Pistenplan {region.name}">
-                <img class="img-responsive lazyload"
-                     data-src="{f:uri.image(image: regionMap, width: '330')}"
-                    alt="{regionMap.alternative}"
-                    title="{regionMap.title}">
+                <ep:lazyLoadImage image="{regionMap}"
+                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                  class="block w-full h-auto"
+                                  width="330"
+                                  alt="{regionMap.alternative}"
+                                  title="{regionMap.title}"/>
             </a>
         </f:for>
     </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
index a8dd50c8..5a3647d8 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
@@ -7,9 +7,11 @@
         </p>
         <f:if condition="{teamerInCharge.image}">
             <f:then>
-                <img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
-                     class="block w-full h-auto mb-4 lazyload"
-                     alt="{teamerInCharge.name}">
+                <ep:lazyLoadImage image="{teamerInCharge.image}"
+                                  loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                  class="block w-full h-auto mb-4"
+                                  width="330"
+                                  alt="{teamerInCharge.name}"/>
             </f:then>
             <f:else>
                 <img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
index 83a2cf6f..9469bf85 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
@@ -16,12 +16,13 @@
             <source media="(max-width: 512px)" data-srcset="{f:uri.image(
                 image: image, width: '350', height: '175c-100'
             )}  350w"/>
-            <img class="scale lazyload" title="{image.title}" alt="{image.alternative}"
-                 src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}"
-                 width="500"
-                 height="250"
-                 data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}"
-             >
+            <ep:lazyLoadImage image="{image}"
+                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                              class="block w-full h-auto"
+                              width="500"
+                              height="250c-100"
+                              alt="{image.alternative}"
+                              title="{image.title}" />
         </picture>
     </f:then>
     <f:else>
@@ -46,12 +47,12 @@
                 src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
                 width: '350', height: '175c-100'
             )}  320w"/>
-            <img class="scale lazyload" title="" alt=""
-                 src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '360', height: '270c-100')}"
-                 width="360"
-                 height="270"
-                 data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '360', height: '270c-100')}"
-             >
+            <ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
+                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                              class="block w-full h-auto"
+                              width="360"
+                              height="270c-100"
+                              alt="" />
         </picture>
     </f:else>
 </f:if>