WIP Implement viewhelper for image lazyloading
This commit is contained in:
Björn Fromme
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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')}"
|
||||
<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}">
|
||||
title="{regionMap.title}"/>
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
@@ -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}">
|
||||
|
||||
@@ -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')}"
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="500"
|
||||
height="250"
|
||||
data-src="{f:uri.image(image: image, width: '500', height: '250c-100')}"
|
||||
>
|
||||
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')}"
|
||||
<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="270"
|
||||
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', width: '360', height: '270c-100')}"
|
||||
>
|
||||
height="270c-100"
|
||||
alt="" />
|
||||
</picture>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
Reference in New Issue
Block a user