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/Resources/Private/Partials/Officetip.html
+5 -8
View File
@@ -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">
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"
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">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+6 -4
View File
@@ -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>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+5 -3
View File
@@ -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}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+13 -12
View File
@@ -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>