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

feat: migrate to native lazy loading of images

Browse Source
This commit is contained in:
fromme
2026-09-12 12:08:09 +02:00
parent d9943619f6
commit 9b3550ec40
35 changed files with 196 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-18
View File
@@ -21,10 +21,8 @@
"glightbox": "^3.0.9",
"htmx.org": "^1.9.12",
"jquery": "^3.6.0",
"lazysizes": "^5.3.2",
"leaflet": "^1.7.1",
"normalize.css": "^8.0.1",
"picturefill": "^3.0.3",
"slick-carousel": "^1.8.1",
"sticky-js": "^1.3.0",
"stimulus-use": "^0.52.0",
@@ -6017,12 +6015,6 @@
"shell-quote": "^1.8.4"
}
},
"node_modules/lazysizes": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.3.2.tgz",
"integrity": "sha512-22UzWP+Vedi/sMeOr8O7FWimRVtiNJV2HCa+V8+peZOw6QbswN9k58VUhd7i6iK5bw5QkYrF01LJbeJe0PV8jg==",
"license": "MIT"
},
"node_modules/leaflet": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -6963,16 +6955,6 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/picturefill": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/picturefill/-/picturefill-3.0.3.tgz",
"integrity": "sha512-JDdx+3i4fs2pkqwWZJgGEM2vFWsq+01YsQFT9CKPGuv2Q0xSdrQZoxi9XwyNARTgxiOdgoAwWQRluLRe/JQX2g==",
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
"license": "MIT",
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/pify": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
package.json
-2
View File
@@ -24,10 +24,8 @@
"glightbox": "^3.0.9",
"htmx.org": "^1.9.12",
"jquery": "^3.6.0",
"lazysizes": "^5.3.2",
"leaflet": "^1.7.1",
"normalize.css": "^8.0.1",
"picturefill": "^3.0.3",
"slick-carousel": "^1.8.1",
"sticky-js": "^1.3.0",
"stimulus-use": "^0.52.0",
public/typo3conf/ext/ep_events/Resources/Private/Assets/js/_app.js
-3
View File
@@ -4,9 +4,6 @@ import Vue from 'vue'
import $ from 'jquery'
import VueSession from 'vue-session'
import 'lazysizes';
import 'lazysizes/plugins/attrchange/ls.attrchange';
const slick = require('slick-carousel');
const Sticky = require('sticky-js');
const $window = $(window);
public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue
+3 -3
View File
@@ -38,9 +38,9 @@
<div class="card card--no-form offerlist-item__card">
<div class="card__inner">
<picture>
<source media="(max-width: 512px)" :data-srcset="offer.teaserImageMobile + ' 500w'"/>
<img class="card__image scale lazyload" data-sizes="auto"
:data-src="offer.teaserImage" alt="">
<source media="(max-width: 512px)" :srcset="offer.teaserImageMobile"/>
<img class="card__image scale"
:src="offer.teaserImage" alt="" loading="lazy">
</picture>
<div class="card__caption">
<span class="card__subtitle" v-html="offer.name"></span>
public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php
-49
View File
@@ -1,49 +0,0 @@
<?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], false);
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);
// ensure a11y compliance
$this->tag->removeAttribute('title');
return $this->tag->render();
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
-5
View File
@@ -1,8 +1,3 @@
// Import dependencies
require('lazysizes')
require('lazysizes/plugins/unveilhooks/ls.unveilhooks')
// require('picturefill')
// Polyfills
// import smoothscroll from 'smoothscroll-polyfill'
// smoothscroll.polyfill()
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_images.scss
-4
View File
@@ -3,7 +3,3 @@
@apply block w-full h-auto;
}
img.lazyloading {
background: url(../../images/lazy.png) no-repeat top center;
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+6 -6
View File
@@ -18,12 +18,12 @@
</f:if>
<f:if condition="{image}">
<f:then>
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{city.name}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{city.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
+6 -7
View File
@@ -1,6 +1,5 @@
<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">
@@ -18,12 +17,12 @@
</f:if>
<f:if condition="{image}">
<f:then>
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{concept.name}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{concept.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+6 -6
View File
@@ -13,12 +13,12 @@
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{image}">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Reminder.html
+5 -6
View File
@@ -1,6 +1,5 @@
<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:alias map="{button: data.flexForm.buttons.0}">
@@ -11,11 +10,11 @@
<div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{image}">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
alt="{image.alternative}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
alt="{image.alternative}" />
</f:if>
</a>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+6 -6
View File
@@ -11,12 +11,12 @@
<div class="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{image}">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{image.alternative}" />
</f:if>
</div>
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+6 -6
View File
@@ -14,12 +14,12 @@
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}" />
<f:image image="{teaserImage}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+5 -6
View File
@@ -1,6 +1,5 @@
<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:alias map="{button: data.flexForm.buttons.0}">
@@ -11,11 +10,11 @@
<div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
alt="{teaserImage.alternative}" />
<f:image image="{teaserImage}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
alt="{teaserImage.alternative}" />
</f:if>
</a>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+6 -6
View File
@@ -11,12 +11,12 @@
<div class="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}" />
<f:image image="{teaserImage}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{teaserImage.alternative}" />
</f:if>
</div>
<div class="px-16 md:px-4 md:w-5/6 md:pl-8 text-center text-white md:text-left" data-rte-content>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+5 -5
View File
@@ -158,11 +158,11 @@
target="_blank"
rel="nofollow"
title="Global Compact">
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/global_compact.png"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="100"
alt="Global Compact" />
<f:image src="EXT:ep_theme/Resources/Public/images/global_compact.png"
loading="lazy"
class="block w-full h-auto"
width="100"
alt="Global Compact" />
</a>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
+6 -6
View File
@@ -9,12 +9,12 @@
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:if condition="{hotel.images.original.0}">
<f:then>
<ep:lazyLoadImage image="{hotel.images.original.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{hotel.name}" />
<f:image image="{hotel.images.original.0}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{hotel.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html
+12 -12
View File
@@ -15,12 +15,12 @@
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}"
data-action="lightbox#open">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{image.alternative}"/>
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{image.alternative}"/>
</a>
</f:alias>
<f:if condition="{thumbnails}">
@@ -35,12 +35,12 @@
data-lightbox-caption="{image.originalResource.description}"
title="{image.title}"
class="block">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="150"
height="85c+100"
alt="{image.alternative}"/>
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="150"
height="85c+100"
alt="{image.alternative}"/>
</a>
</f:if>
</f:for>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Journey/Details.html
+6 -7
View File
@@ -1,6 +1,5 @@
<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">
<div class="odd:bg-zinc-50 p-4" data-rte-content>
@@ -18,12 +17,12 @@
</h3>
{journey.byCar -> f:format.html()}
<f:if condition="{journey.image}">
<ep:lazyLoadImage image="{journey.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{journey.image.alternative}" />
<f:image image="{journey.image}"
loading="lazy"
class="block w-full h-auto"
width="770"
height="430c+100"
alt="{journey.image.alternative}" />
</f:if>
</f:if>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+6 -4
View File
@@ -10,8 +10,9 @@
<f:then>
<f:if condition="{newsItem.mediaPreviews.0}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<img class="block w-full h-auto lazyload"
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
<img class="block w-full h-auto"
src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
loading="lazy"
alt="{mediaElement.originalResource.alternative}">
</f:alias>
</f:if>
@@ -19,8 +20,9 @@
<f:else>
<f:if condition="{newsItem.media}">
<f:alias map="{mediaElement: '{newsItem.media.0}'}">
<img class="block w-full h-auto lazyload"
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
<img class="block w-full h-auto"
src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
loading="lazy"
alt="{mediaElement.originalResource.alternative}">
</f:alias>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+5 -5
View File
@@ -8,11 +8,11 @@
</div>
<div class="col-span-1">
<f:if condition="{officetip.author.image}">
<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:image image="{officetip.author.image}"
loading="lazy"
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
+10 -10
View File
@@ -16,19 +16,19 @@
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
<f:if condition="{productImage}">
<f:then>
<ep:lazyLoadImage image="{productImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{product.name}" />
<f:image image="{productImage}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{product.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{product.name}" />
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{product.name}" />
</f:else>
</f:if>
<div class="absolute top-0 left-0 z-20 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}/70', else: 'bg-ep-primary/80')}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+6 -6
View File
@@ -18,12 +18,12 @@
</f:if>
<f:if condition="{image}">
<f:then>
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{region.name}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{region.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Webcam.html
+5 -6
View File
@@ -1,6 +1,5 @@
<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:if condition="{region.webcam.available}">
@@ -13,11 +12,11 @@
data-action="lightbox#open"
data-lightbox-caption="Webcam {region.name}"
title="Webcam {region.name}">
<ep:lazyLoadImage src="{region.webcam.url}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="Webcam {region.name}" />
<f:image src="{region.webcam.url}"
loading="lazy"
class="block w-full h-auto"
width="330"
alt="Webcam {region.name}" />
</a>
</div>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+5 -6
View File
@@ -1,6 +1,5 @@
<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:if condition="{region.regionMaps}">
@@ -17,11 +16,11 @@
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}">
<ep:lazyLoadImage image="{regionMap}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="{regionMap.alternative}"/>
<f:image image="{regionMap}"
loading="lazy"
class="block w-full h-auto"
width="330"
alt="{regionMap.alternative}"/>
</a>
</f:for>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+5 -6
View File
@@ -1,6 +1,5 @@
<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:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
@@ -11,11 +10,11 @@
Teamer vor Ort
</p>
<f:if condition="{teamerInCharge.image}">
<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:image image="{teamerInCharge.image}"
loading="lazy"
class="block w-full h-auto mb-4"
width="330"
alt="{teamerInCharge.name}"/>
</f:if>
<p>{teamerInCharge.name}</p>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+6 -6
View File
@@ -9,12 +9,12 @@
<f:if condition="{context.country}">
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
</f:if>
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{teaserImage.alternative}" />
<f:image image="{teaserImage}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{teaserImage.alternative}" />
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-2 no-underline">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+24 -25
View File
@@ -1,62 +1,61 @@
<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:if condition="{image.uid}">
<f:then>
<picture>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
<source media="(min-width: 1201px)" srcset="{f:uri.image(
image: image, width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
<source media="(max-width: 1200px)" srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
<source media="(max-width: 991px)" srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
<source media="(max-width: 768px)" srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
<source media="(max-width: 512px)" srcset="{f:uri.image(
image: image, width: '350', height: '175c-100'
)} 350w"/>
<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}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="500"
height="250c-100"
alt="{image.alternative}" />
</picture>
</f:then>
<f:else>
<picture>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
<source media="(min-width: 1201px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
<source media="(max-width: 1200px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100'
)} 420w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
)} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
<source media="(max-width: 768px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
<source media="(max-width: 512px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100'
)} 320w"/>
<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="" />
)} 350w"/>
<f:image src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
loading="lazy"
class="block w-full h-auto"
width="360"
height="270c-100"
alt="" />
</picture>
</f:else>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+10 -8
View File
@@ -1,25 +1,27 @@
<f:if condition="{image}">
<f:then>
<picture class="product-teaser__image">
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
<source media="(min-width: 1201px)" srcset="{f:uri.image(
image: image, width: '320', height: '200c-100'
)} 320w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
<source media="(max-width: 1200px)" srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
<source media="(max-width: 991px)" srcset="{f:uri.image(
image: image, width: '260', height: '220c-100'
)} 260w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
<source media="(max-width: 768px)" srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
)} 320w"/>
<img class="scale lazyload" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
data-src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
<img class="scale" alt="{image.alternative}"
src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
loading="lazy"
>
</picture>
</f:then>
<f:else>
<img class="scale" data-src="https://placehold.it/400x300" alt="">
<img class="scale" alt=""
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}"
loading="lazy">
</f:else>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
+3 -2
View File
@@ -7,8 +7,9 @@
{data.bodytext -> f:format.html()}
<f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}" title="{files.0.originalResource.title}">
<img class="img-responsive lazyload"
data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
<img class="img-responsive"
src="{f:uri.image(image: files.0, maxWidth: '770')}"
loading="lazy"
alt="{files.0.originalResource.alternative}">
</f:link.typolink>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+6 -7
View File
@@ -1,7 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Content">
@@ -25,12 +24,12 @@
<f:section name="Image">
<div class="{cssClasses}">
<f:link.typolink parameter="{image.link}">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="400c"
height="400"
alt="{image.alternative}" />
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="400c"
height="400"
alt="{image.alternative}" />
</f:link.typolink>
</div>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
+5 -6
View File
@@ -10,12 +10,11 @@
<f:for each="{items}" as="item" iteration="iteration">
<div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16">
<div class="mb-4 lg:mb-0 lg:w-1/2">
<ep:lazyLoadImage image="{item.image.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="768"
alt="{item.data.name}"
title="{item.data.name}" />
<f:image image="{item.image.0}"
loading="lazy"
class="block w-full h-auto"
width="768"
alt="{item.data.name}"/>
</div>
<div class="lg:w-1/2">
<div class="px-4 {f:if(condition: iteration.isEven, then: 'lg:pl-12', else: 'lg:pr-12')}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+6 -7
View File
@@ -1,6 +1,5 @@
<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:layout name="Bare"/>
@@ -12,12 +11,12 @@
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:if condition="{country.teaserImages}">
<ep:lazyLoadImage image="{country.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{country.name}" />
<f:image image="{country.teaserImages.0}"
loading="lazy"
class="block w-full h-full object-cover"
width="400c"
height="300c"
alt="{country.name}" />
</f:if>
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+10 -11
View File
@@ -182,12 +182,11 @@
title="360°-Rundgang {hotel.name}">
<f:if condition="{product.tourThumbnail}">
<f:then>
<ep:lazyLoadImage image="{product.tourThumbnail}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="330"
alt="360°-Rundgang {hotel.name}"
title="360°-Rundgang {hotel.name}"/>
<f:image image="{product.tourThumbnail}"
loading="lazy"
class="block w-full h-auto"
width="330"
alt="360°-Rundgang {hotel.name}"/>
</f:then>
<f:else>
<div class="button bg-button w-full">
@@ -335,11 +334,11 @@
data-lightbox-caption="{image.originalResource.description}"
data-action="lightbox#open"
class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}">
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
<f:image image="{image}"
loading="lazy"
class="block w-full h-auto"
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
</a>
</f:for>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
+6 -8
View File
@@ -1,7 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/>
@@ -28,13 +27,12 @@
arguments: '{member: member}'
)}">
<f:if condition="{member.image}">
<ep:lazyLoadImage image="{member.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{member.name}"
title="{member.name}" />
<f:image image="{member.image}"
loading="lazy"
class="block w-full h-auto rounded-full"
width="400"
height="400c"
alt="{member.name}"/>
</f:if>
<div class="text-center text-zinc-800 pt-2">
<span class="block font-bold text-xl">