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", "glightbox": "^3.0.9",
"htmx.org": "^1.9.12", "htmx.org": "^1.9.12",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lazysizes": "^5.3.2",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"picturefill": "^3.0.3",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"sticky-js": "^1.3.0", "sticky-js": "^1.3.0",
"stimulus-use": "^0.52.0", "stimulus-use": "^0.52.0",
@@ -6017,12 +6015,6 @@
"shell-quote": "^1.8.4" "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": { "node_modules/leaflet": {
"version": "1.9.4", "version": "1.9.4",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
@@ -6963,16 +6955,6 @@
"url": "https://github.com/sponsors/jonschlinkert" "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": { "node_modules/pify": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
package.json
-2
View File
@@ -24,10 +24,8 @@
"glightbox": "^3.0.9", "glightbox": "^3.0.9",
"htmx.org": "^1.9.12", "htmx.org": "^1.9.12",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lazysizes": "^5.3.2",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"picturefill": "^3.0.3",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"sticky-js": "^1.3.0", "sticky-js": "^1.3.0",
"stimulus-use": "^0.52.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 $ from 'jquery'
import VueSession from 'vue-session' import VueSession from 'vue-session'
import 'lazysizes';
import 'lazysizes/plugins/attrchange/ls.attrchange';
const slick = require('slick-carousel'); const slick = require('slick-carousel');
const Sticky = require('sticky-js'); const Sticky = require('sticky-js');
const $window = $(window); 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 card--no-form offerlist-item__card">
<div class="card__inner"> <div class="card__inner">
<picture> <picture>
<source media="(max-width: 512px)" :data-srcset="offer.teaserImageMobile + ' 500w'"/> <source media="(max-width: 512px)" :srcset="offer.teaserImageMobile"/>
<img class="card__image scale lazyload" data-sizes="auto" <img class="card__image scale"
:data-src="offer.teaserImage" alt=""> :src="offer.teaserImage" alt="" loading="lazy">
</picture> </picture>
<div class="card__caption"> <div class="card__caption">
<span class="card__subtitle" v-html="offer.name"></span> <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 // Polyfills
// import smoothscroll from 'smoothscroll-polyfill' // import smoothscroll from 'smoothscroll-polyfill'
// 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; @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>
<f:if condition="{image}"> <f:if condition="{image}">
<f:then> <f:then>
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{city.name}" /> alt="{city.name}" />
</f:then> </f:then>
<f:else> <f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png" <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" <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">
@@ -18,12 +17,12 @@
</f:if> </f:if>
<f:if condition="{image}"> <f:if condition="{image}">
<f:then> <f:then>
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{concept.name}" /> alt="{concept.name}" />
</f:then> </f:then>
<f:else> <f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png" <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="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8"> <div class="relative max-w-md mx-auto mb-8">
<f:if condition="{image}"> <f:if condition="{image}">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400c" height="400c"
alt="{image.alternative}" /> alt="{image.alternative}" />
</f:if> </f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow" 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" <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:alias map="{button: data.flexForm.buttons.0}"> <f:alias map="{button: data.flexForm.buttons.0}">
@@ -11,11 +10,11 @@
<div class="col-md-6"> <div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}"> <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{image}"> <f:if condition="{image}">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
alt="{image.alternative}" /> alt="{image.alternative}" />
</f:if> </f:if>
</a> </a>
</div> </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="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6"> <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{image}"> <f:if condition="{image}">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400c" height="400c"
alt="{image.alternative}" /> alt="{image.alternative}" />
</f:if> </f:if>
</div> </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> <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="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8"> <div class="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}" <f:image image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400c" height="400c"
alt="{teaserImage.alternative}" /> alt="{teaserImage.alternative}" />
</f:if> </f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow" 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" <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:alias map="{button: data.flexForm.buttons.0}"> <f:alias map="{button: data.flexForm.buttons.0}">
@@ -11,11 +10,11 @@
<div class="col-md-6"> <div class="col-md-6">
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}"> <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}" <f:image image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
alt="{teaserImage.alternative}" /> alt="{teaserImage.alternative}" />
</f:if> </f:if>
</a> </a>
</div> </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="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6"> <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<ep:lazyLoadImage image="{teaserImage}" <f:image image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400c" height="400c"
alt="{teaserImage.alternative}" /> alt="{teaserImage.alternative}" />
</f:if> </f:if>
</div> </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> <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" target="_blank"
rel="nofollow" rel="nofollow"
title="Global Compact"> title="Global Compact">
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/global_compact.png" <f:image src="EXT:ep_theme/Resources/Public/images/global_compact.png"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="100" width="100"
alt="Global Compact" /> alt="Global Compact" />
</a> </a>
</div> </div>
</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')} {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:if condition="{hotel.images.original.0}">
<f:then> <f:then>
<ep:lazyLoadImage image="{hotel.images.original.0}" <f:image image="{hotel.images.original.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{hotel.name}" /> alt="{hotel.name}" />
</f:then> </f:then>
<f:else> <f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png" <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')}" <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
title="{image.title}" title="{image.title}"
data-action="lightbox#open"> data-action="lightbox#open">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="770" width="770"
height="430c+100" height="430c+100"
alt="{image.alternative}"/> alt="{image.alternative}"/>
</a> </a>
</f:alias> </f:alias>
<f:if condition="{thumbnails}"> <f:if condition="{thumbnails}">
@@ -35,12 +35,12 @@
data-lightbox-caption="{image.originalResource.description}" data-lightbox-caption="{image.originalResource.description}"
title="{image.title}" title="{image.title}"
class="block"> class="block">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="150" width="150"
height="85c+100" height="85c+100"
alt="{image.alternative}"/> alt="{image.alternative}"/>
</a> </a>
</f:if> </f:if>
</f:for> </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" <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">
<div class="odd:bg-zinc-50 p-4" data-rte-content> <div class="odd:bg-zinc-50 p-4" data-rte-content>
@@ -18,12 +17,12 @@
</h3> </h3>
{journey.byCar -> f:format.html()} {journey.byCar -> f:format.html()}
<f:if condition="{journey.image}"> <f:if condition="{journey.image}">
<ep:lazyLoadImage image="{journey.image}" <f:image image="{journey.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="770" width="770"
height="430c+100" height="430c+100"
alt="{journey.image.alternative}" /> alt="{journey.image.alternative}" />
</f:if> </f:if>
</f:if> </f:if>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+6 -4
View File
@@ -10,8 +10,9 @@
<f:then> <f:then>
<f:if condition="{newsItem.mediaPreviews.0}"> <f:if condition="{newsItem.mediaPreviews.0}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}"> <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<img class="block w-full h-auto lazyload" <img class="block w-full h-auto"
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}" src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
loading="lazy"
alt="{mediaElement.originalResource.alternative}"> alt="{mediaElement.originalResource.alternative}">
</f:alias> </f:alias>
</f:if> </f:if>
@@ -19,8 +20,9 @@
<f:else> <f:else>
<f:if condition="{newsItem.media}"> <f:if condition="{newsItem.media}">
<f:alias map="{mediaElement: '{newsItem.media.0}'}"> <f:alias map="{mediaElement: '{newsItem.media.0}'}">
<img class="block w-full h-auto lazyload" <img class="block w-full h-auto"
data-src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}" src="{f:uri.image(image: mediaElement, width: '640', height: '360c+50')}"
loading="lazy"
alt="{mediaElement.originalResource.alternative}"> alt="{mediaElement.originalResource.alternative}">
</f:alias> </f:alias>
</f:if> </f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+5 -5
View File
@@ -8,11 +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}">
<ep:lazyLoadImage image="{officetip.author.image}" <f:image image="{officetip.author.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="120" width="120"
alt="{officetip.author.name}" /> alt="{officetip.author.name}" />
</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
+10 -10
View File
@@ -16,19 +16,19 @@
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}"> <div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
<f:if condition="{productImage}"> <f:if condition="{productImage}">
<f:then> <f:then>
<ep:lazyLoadImage image="{productImage}" <f:image image="{productImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{product.name}" /> alt="{product.name}" />
</f:then> </f:then>
<f:else> <f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png" <f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{product.name}" /> alt="{product.name}" />
</f:else> </f:else>
</f:if> </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')}"> <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>
<f:if condition="{image}"> <f:if condition="{image}">
<f:then> <f:then>
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{region.name}" /> alt="{region.name}" />
</f:then> </f:then>
<f:else> <f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png" <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" <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:if condition="{region.webcam.available}"> <f:if condition="{region.webcam.available}">
@@ -13,11 +12,11 @@
data-action="lightbox#open" data-action="lightbox#open"
data-lightbox-caption="Webcam {region.name}" data-lightbox-caption="Webcam {region.name}"
title="Webcam {region.name}"> title="Webcam {region.name}">
<ep:lazyLoadImage src="{region.webcam.url}" <f:image src="{region.webcam.url}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="330" width="330"
alt="Webcam {region.name}" /> alt="Webcam {region.name}" />
</a> </a>
</div> </div>
</f:if> </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" <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:if condition="{region.regionMaps}"> <f:if condition="{region.regionMaps}">
@@ -17,11 +16,11 @@
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}">
<ep:lazyLoadImage image="{regionMap}" <f:image image="{regionMap}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="330" width="330"
alt="{regionMap.alternative}"/> alt="{regionMap.alternative}"/>
</a> </a>
</f:for> </f:for>
</div> </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" <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:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
@@ -11,11 +10,11 @@
Teamer vor Ort Teamer vor Ort
</p> </p>
<f:if condition="{teamerInCharge.image}"> <f:if condition="{teamerInCharge.image}">
<ep:lazyLoadImage image="{teamerInCharge.image}" <f:image image="{teamerInCharge.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto mb-4" class="block w-full h-auto mb-4"
width="330" width="330"
alt="{teamerInCharge.name}"/> alt="{teamerInCharge.name}"/>
</f:if> </f:if>
<p>{teamerInCharge.name}</p> <p>{teamerInCharge.name}</p>
</div> </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}"> <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')} {ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
</f:if> </f:if>
<ep:lazyLoadImage image="{teaserImage}" <f:image image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{teaserImage.alternative}" /> alt="{teaserImage.alternative}" />
</div> </div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200"> <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"> <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" <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:if condition="{image.uid}"> <f:if condition="{image.uid}">
<f:then> <f:then>
<picture> <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' image: image, width: '370', height: '220c-100'
)} 370w"/> )} 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' image: image, width: '320', height: '160c-100'
)} 320w"/> )} 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' image: image, width: '360', height: '200c-100'
)} 360w"/> )} 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' image: image, width: '500', height: '250c-100'
)} 500w"/> )} 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' image: image, width: '350', height: '175c-100'
)} 350w"/> )} 350w"/>
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="500" width="500"
height="250c-100" height="250c-100"
alt="{image.alternative}" /> alt="{image.alternative}" />
</picture> </picture>
</f:then> </f:then>
<f:else> <f:else>
<picture> <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', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '370', height: '220c-100' width: '370', height: '220c-100'
)} 370w"/> )} 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', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100' width: '320', height: '160c-100'
)} 420w"/> )} 320w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image( <source media="(max-width: 991px)" srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '360', height: '200c-100' width: '360', height: '200c-100'
)} 360w"/> )} 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', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100' width: '500', height: '250c-100'
)} 500w"/> )} 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', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100' width: '350', height: '175c-100'
)} 320w"/> )} 350w"/>
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/header-winter.jpg" <f:image src="EXT:ep_theme/Resources/Public/images/header-winter.jpg"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="360" width="360"
height="270c-100" height="270c-100"
alt="" /> alt="" />
</picture> </picture>
</f:else> </f:else>
</f:if> </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:if condition="{image}">
<f:then> <f:then>
<picture class="product-teaser__image"> <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' image: image, width: '320', height: '200c-100'
)} 320w"/> )} 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' image: image, width: '220', height: '130c-100'
)} 220w"/> )} 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' image: image, width: '260', height: '220c-100'
)} 260w"/> )} 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' image: image, width: '320', height: '140c-100'
)} 320w"/> )} 320w"/>
<img class="scale lazyload" alt="{image.alternative}" <img class="scale" alt="{image.alternative}"
src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png', width: '260', height: '160')}" src="{f:uri.image(image: image, width: '260', height: '160c-100')}"
data-src="{f:uri.image(image: image, width: '260', height: '160c-100')}" loading="lazy"
> >
</picture> </picture>
</f:then> </f:then>
<f:else> <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:else>
</f:if> </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()} {data.bodytext -> f:format.html()}
<f:if condition="{files}"> <f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}" title="{files.0.originalResource.title}"> <f:link.typolink parameter="{files.0.link}" title="{files.0.originalResource.title}">
<img class="img-responsive lazyload" <img class="img-responsive"
data-src="{f:uri.image(image: files.0, maxWidth: '770')}" src="{f:uri.image(image: files.0, maxWidth: '770')}"
loading="lazy"
alt="{files.0.originalResource.alternative}"> alt="{files.0.originalResource.alternative}">
</f:link.typolink> </f:link.typolink>
</f:if> </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" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" 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"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Content"> <f:section name="Content">
@@ -25,12 +24,12 @@
<f:section name="Image"> <f:section name="Image">
<div class="{cssClasses}"> <div class="{cssClasses}">
<f:link.typolink parameter="{image.link}"> <f:link.typolink parameter="{image.link}">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="400c" width="400c"
height="400" height="400"
alt="{image.alternative}" /> alt="{image.alternative}" />
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:section> </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"> <f:for each="{items}" as="item" iteration="iteration">
<div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16"> <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"> <div class="mb-4 lg:mb-0 lg:w-1/2">
<ep:lazyLoadImage image="{item.image.0}" <f:image image="{item.image.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="768" width="768"
alt="{item.data.name}" alt="{item.data.name}"/>
title="{item.data.name}" />
</div> </div>
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<div class="px-4 {f:if(condition: iteration.isEven, then: 'lg:pl-12', else: 'lg:pr-12')}"> <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" <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:layout name="Bare"/> <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> <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> </svg>
<f:if condition="{country.teaserImages}"> <f:if condition="{country.teaserImages}">
<ep:lazyLoadImage image="{country.teaserImages.0}" <f:image image="{country.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="400c" width="400c"
height="300c" height="300c"
alt="{country.name}" /> alt="{country.name}" />
</f:if> </f:if>
</div> </div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200"> <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}"> title="360°-Rundgang {hotel.name}">
<f:if condition="{product.tourThumbnail}"> <f:if condition="{product.tourThumbnail}">
<f:then> <f:then>
<ep:lazyLoadImage image="{product.tourThumbnail}" <f:image image="{product.tourThumbnail}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="330" width="330"
alt="360°-Rundgang {hotel.name}" alt="360°-Rundgang {hotel.name}"/>
title="360°-Rundgang {hotel.name}"/>
</f:then> </f:then>
<f:else> <f:else>
<div class="button bg-button w-full"> <div class="button bg-button w-full">
@@ -335,11 +334,11 @@
data-lightbox-caption="{image.originalResource.description}" data-lightbox-caption="{image.originalResource.description}"
data-action="lightbox#open" data-action="lightbox#open"
class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}"> class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}">
<ep:lazyLoadImage image="{image}" <f:image image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto" class="block w-full h-auto"
width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}" width="{f:if(condition: iteration.isFirst, then: '400', else: '160')}"
height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/> height="{f:if(condition: iteration.isFirst, then: '225c+100', else: '160c+100')}"/>
</a> </a>
</f:for> </f:for>
</div> </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" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" 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"> xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
@@ -28,13 +27,12 @@
arguments: '{member: member}' arguments: '{member: member}'
)}"> )}">
<f:if condition="{member.image}"> <f:if condition="{member.image}">
<ep:lazyLoadImage image="{member.image}" <f:image image="{member.image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loading="lazy"
class="block w-full h-auto rounded-full" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400c" height="400c"
alt="{member.name}" alt="{member.name}"/>
title="{member.name}" />
</f:if> </f:if>
<div class="text-center text-zinc-800 pt-2"> <div class="text-center text-zinc-800 pt-2">
<span class="block font-bold text-xl"> <span class="block font-bold text-xl">