EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Implement viewhelper for image lazyloading

Browse Source
This commit is contained in:
Björn Fromme
2021-12-26 21:09:22 +01:00
parent f9e2fc888d
commit 3cdd02ed21
6 changed files with 83 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php
+47
View File
@@ -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();
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+5 -8
View File
@@ -8,14 +8,11 @@
</div> </div>
<div class="col-span-1"> <div class="col-span-1">
<f:if condition="{officetip.author.image}"> <f:if condition="{officetip.author.image}">
<f:then> <ep:lazyLoadImage image="{officetip.author.image}"
<img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto lazyload" class="block w-full h-auto"
alt="{officetip.author.name}"> width="120"
</f:then> alt="{officetip.author.name}" />
<f:else>
<img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}">
</f:else>
</f:if> </f:if>
</div> </div>
<div class="col-span-2"> <div class="col-span-2">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+7 -5
View File
@@ -1,5 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser"> <f:section name="Teaser">
@@ -13,11 +14,12 @@
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}"> <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()}')}" <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"> title="{region.name} {product.name} Details und Buchen">
<img class="block w-full h-full object-cover lazyload" <ep:lazyLoadImage image="{productImage}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '360', height: '270')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
data-src="{f:uri.image(image: productImage, width: '360c', height: '270c')}" class="block w-full h-full object-cover"
alt="{product.name}" width="360c"
width="360" height="270" /> height="270c"
alt="{product.name}" />
</a> </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="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"> <div class="flex items-center space-x-2">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+5 -3
View File
@@ -11,10 +11,12 @@
data-lightbox-index="{iteration.cycle}" data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="Pistenplan {region.name}" data-lightbox-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}"> title="Pistenplan {region.name}">
<img class="img-responsive lazyload" <ep:lazyLoadImage image="{regionMap}"
data-src="{f:uri.image(image: regionMap, width: '330')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="{regionMap.alternative}" alt="{regionMap.alternative}"
title="{regionMap.title}"> title="{regionMap.title}"/>
</a> </a>
</f:for> </f:for>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+5 -3
View File
@@ -7,9 +7,11 @@
</p> </p>
<f:if condition="{teamerInCharge.image}"> <f:if condition="{teamerInCharge.image}">
<f:then> <f:then>
<img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}" <ep:lazyLoadImage image="{teamerInCharge.image}"
class="block w-full h-auto mb-4 lazyload" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
alt="{teamerInCharge.name}"> class="block w-full h-auto mb-4"
width="330"
alt="{teamerInCharge.name}"/>
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}"> <img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+11 -10
View File
@@ -16,12 +16,13 @@
<source media="(max-width: 512px)" data-srcset="{f:uri.image( <source media="(max-width: 512px)" data-srcset="{f:uri.image(
image: image, width: '350', height: '175c-100' image: image, width: '350', height: '175c-100'
)} 350w"/> )} 350w"/>
<img class="scale lazyload" title="{image.title}" alt="{image.alternative}" <ep:lazyLoadImage image="{image}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '500', height: '250')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="500" width="500"
height="250" height="250c-100"
data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}" alt="{image.alternative}"
> title="{image.title}" />
</picture> </picture>
</f:then> </f:then>
<f:else> <f:else>
@@ -46,12 +47,12 @@
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100' width: '350', height: '175c-100'
)} 320w"/> )} 320w"/>
<img class="scale lazyload" title="" alt="" <ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '360', height: '270c-100')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="360" width="360"
height="270" height="270c-100"
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '360', height: '270c-100')}" alt="" />
>
</picture> </picture>
</f:else> </f:else>
</f:if> </f:if>