From 9b3550ec400b2ce20da03d2518db7d6905fb8f6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= Date: Sat, 12 Sep 2026 12:08:09 +0200 Subject: [PATCH] feat: migrate to native lazy loading of images --- package-lock.json | 18 ------- package.json | 2 - .../Resources/Private/Assets/js/_app.js | 3 -- .../Assets/js/components/OfferTeasers.vue | 6 +-- .../ViewHelpers/LazyLoadImageViewHelper.php | 49 ------------------- .../Resources/Private/Assets/js/_app.js | 5 -- .../Private/Assets/scss/base/_images.scss | 4 -- .../Private/Partials/City/Teaser.html | 12 ++--- .../Private/Partials/Concept/Teaser.html | 13 +++-- .../Private/Partials/Disrupter/Large.html | 12 ++--- .../Private/Partials/Disrupter/Reminder.html | 11 ++--- .../Private/Partials/Disrupter/Small.html | 12 ++--- .../Private/Partials/Disturber/Large.html | 12 ++--- .../Private/Partials/Disturber/Reminder.html | 11 ++--- .../Private/Partials/Disturber/Small.html | 12 ++--- .../Resources/Private/Partials/Footer.html | 10 ++-- .../Private/Partials/Hotel/Teaser.html | 12 ++--- .../Private/Partials/ImageGallery.html | 24 ++++----- .../Private/Partials/Journey/Details.html | 13 +++-- .../Private/Partials/News/List/Item.html | 10 ++-- .../Resources/Private/Partials/Officetip.html | 10 ++-- .../Private/Partials/Product/Teaser.html | 20 ++++---- .../Private/Partials/Region/Teaser.html | 12 ++--- .../Private/Partials/Region/Webcam.html | 11 ++--- .../Private/Partials/RegionMaps.html | 11 ++--- .../Resources/Private/Partials/Teamer.html | 11 ++--- .../Private/Partials/Teaser/OneColumn.html | 12 ++--- .../Private/Partials/TeaserImage.html | 49 +++++++++---------- .../Private/Partials/TeaserWideImage.html | 18 ++++--- .../Private/Partials/Textmedia/Default.html | 5 +- .../Partials/Textmedia/Partnerlogos.html | 13 +++-- .../Templates/FluidStyledContent/Lineup.html | 11 ++--- .../FluidStyledContent/TeaserCountry.html | 13 +++-- .../Private/Templates/Product/Detail.html | 21 ++++---- .../Private/Templates/Team/List.html | 14 +++--- 35 files changed, 196 insertions(+), 286 deletions(-) delete mode 100644 public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php diff --git a/package-lock.json b/package-lock.json index 42b33d18..0ff72db5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 82689ff2..ffb72ca4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/_app.js index cc057f56..39547dd3 100644 --- a/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/_app.js @@ -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); diff --git a/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue b/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue index e9c378fc..ff3fb9dc 100644 --- a/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue +++ b/public/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/OfferTeasers.vue @@ -38,9 +38,9 @@
- - + +
diff --git a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php deleted file mode 100644 index 35cadc37..00000000 --- a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/LazyLoadImageViewHelper.php +++ /dev/null @@ -1,49 +0,0 @@ -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(); - } -} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js index 75a4ebde..88023442 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js @@ -1,8 +1,3 @@ -// Import dependencies -require('lazysizes') -require('lazysizes/plugins/unveilhooks/ls.unveilhooks') -// require('picturefill') - // Polyfills // import smoothscroll from 'smoothscroll-polyfill' // smoothscroll.polyfill() diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_images.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_images.scss index 07abad95..df2c6090 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_images.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_images.scss @@ -3,7 +3,3 @@ @apply block w-full h-auto; } -img.lazyloading { - background: url(../../images/lazy.png) no-repeat top center; -} - diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html index 36c1aa2d..731961b7 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html @@ -18,12 +18,12 @@ - + @@ -18,12 +17,12 @@ - +
- + @@ -11,11 +10,11 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html index 583a6e44..36925d74 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html @@ -11,12 +11,12 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html index 7071aff3..fa2f2ca9 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html @@ -14,12 +14,12 @@
- + @@ -11,11 +10,11 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html index 2ee73161..4c3a560d 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html @@ -11,12 +11,12 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html index 473da21e..47ac9238 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html @@ -158,11 +158,11 @@ target="_blank" rel="nofollow" title="Global Compact"> - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html index c93c788d..77cb703c 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html @@ -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')} - + - + @@ -35,12 +35,12 @@ data-lightbox-caption="{image.originalResource.description}" title="{image.title}" class="block"> - + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Journey/Details.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Journey/Details.html index 4d20a21e..c2767af2 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Journey/Details.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Journey/Details.html @@ -1,6 +1,5 @@
@@ -18,12 +17,12 @@ {journey.byCar -> f:format.html()} - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html index 84e5cff2..85a37647 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html @@ -10,8 +10,9 @@ - {mediaElement.originalResource.alternative} @@ -19,8 +20,9 @@ - {mediaElement.originalResource.alternative} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html index 25c56706..0a8a223c 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html @@ -8,11 +8,11 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html index 40bd1bb8..ebc557cf 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html @@ -16,19 +16,19 @@
- + + class="block w-full h-full object-cover" + width="400c" + height="300c" + alt="{product.name}" />
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html index 98115da6..eb3484c0 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html @@ -18,12 +18,12 @@ - + @@ -13,11 +12,11 @@ data-action="lightbox#open" data-lightbox-caption="Webcam {region.name}" title="Webcam {region.name}"> - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html index bc921684..b26b4d3b 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html @@ -1,6 +1,5 @@ @@ -17,11 +16,11 @@ data-lightbox-index="{iteration.cycle}" data-lightbox-caption="Pistenplan {region.name}" title="Pistenplan {region.name}"> - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html index 9e654bee..f09bcc8f 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html @@ -1,6 +1,5 @@ @@ -11,11 +10,11 @@ Teamer vor Ort

- +

{teamerInCharge.name}

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html index b0e39bf4..d2e520bd 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html @@ -9,12 +9,12 @@ {ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')} - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html index 51cd9bc5..ed21a4df 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html @@ -1,62 +1,61 @@ - - - - - - + - - - + - - - + )} 350w"/> + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html index aad1f34e..9054c5f2 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html @@ -1,25 +1,27 @@ - - - - - {image.alternative} - + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html index c8fa018b..24d7f7ca 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html @@ -7,8 +7,9 @@ {data.bodytext -> f:format.html()} - {files.0.originalResource.alternative} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html index a5b07991..55a62ee7 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html @@ -1,7 +1,6 @@ @@ -25,12 +24,12 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html index af331a26..7ec6f5f9 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html @@ -10,12 +10,11 @@
- +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html index 3801c498..aebcaeab 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html @@ -1,6 +1,5 @@ @@ -12,12 +11,12 @@ - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html index a127c11c..173ba418 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html @@ -182,12 +182,11 @@ title="360°-Rundgang {hotel.name}"> - +
@@ -335,11 +334,11 @@ data-lightbox-caption="{image.originalResource.description}" data-action="lightbox#open" class="{f:if(condition: iteration.isFirst, then: 'col-span-4')}"> - +
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html index 3d64eed5..d3edd320 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html @@ -1,7 +1,6 @@ @@ -28,13 +27,12 @@ arguments: '{member: member}' )}"> - +