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

Reduce number of generated images

Browse Source
This commit is contained in:
Björn Fromme
2021-12-27 18:49:30 +01:00
parent 03664a522d
commit eb64c05a6c
12 changed files with 148 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+7 -1
View File
@@ -1,5 +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: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">
@@ -10,7 +11,12 @@
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{city.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-{city.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<f:render partial="TeaserImage" arguments="{image: city.teaserImage}"/> <ep:lazyLoadImage image="{city.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{city.name}" />
</div> </div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200"> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4"> <span class="headline--3 mb-4">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html
+7 -1
View File
@@ -1,5 +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: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">
@@ -7,7 +8,12 @@
title="{concept.name}" title="{concept.name}"
class="flex flex-col"> class="flex flex-col">
<div class="relative"> <div class="relative">
<f:render partial="TeaserImage" arguments="{image: concept.teaserImage}"/> <ep:lazyLoadImage image="{concept.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{concept.name}" />
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay"> <div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
<div class="flex h-full w-full p-4 items-end headline--3 text-white"> <div class="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name} {concept.name}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+7 -10
View File
@@ -1,6 +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: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="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}"> <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
@@ -13,16 +13,13 @@
<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}">
<f:then> <ep:lazyLoadImage image="{image}"
<img class="block rounded-full w-full h-auto lazyload" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="400" width="400"
height="400" height="400c"
data-src="{f:uri.image(image: image, width: '400', height: '400c')}" alt="{image.alternative}"
alt="{image.alternative}" title="{image.title}"> title="{image.title}" />
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</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/Small.html
+7 -9
View File
@@ -1,5 +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: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="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}"> <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
@@ -10,16 +11,13 @@
<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}">
<f:then> <ep:lazyLoadImage image="{image}"
<img class="block w-full h-auto rounded-full lazyload" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto rounded-full"
width="400" width="400"
height="400" height="400c"
data-src="{f:uri.image(image: image, width: '400', height: '400c')}" alt="{image.alternative}"
alt="{image.alternative}" title="{image.title}"> title="{image.title}" />
</f:then>
<f:else>
<img class="block w-full h-auto rounded-full" src="https://placehold.it/800x600" alt="">
</f:else>
</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
+7 -9
View File
@@ -1,6 +1,7 @@
<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">
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}"> <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
@@ -13,16 +14,13 @@
<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}">
<f:then> <ep:lazyLoadImage image="{teaserImage}"
<img class="block rounded-full w-full h-auto lazyload" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}" class="block w-full h-auto rounded-full"
width="400" width="400"
height="400" height="400c"
alt="{teaserImage.alternative}" title="{teaserImage.title}"> alt="{teaserImage.alternative}"
</f:then> title="{teaserImage.title}" />
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</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/Small.html
+7 -9
View File
@@ -1,5 +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: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="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}"> <div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)}">
@@ -10,16 +11,13 @@
<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}">
<f:then> <ep:lazyLoadImage image="{teaserImage}"
<img class="block w-full h-auto rounded-full lazyload" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="400" width="400"
height="400" height="400c"
data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}" alt="{teaserImage.alternative}"
alt="{teaserImage.alternative}" title="{teaserImage.title}"> title="{teaserImage.title}" />
</f:then>
<f:else>
<img class="block w-full h-auto rounded-full" src="https://placehold.it/800x600" alt="">
</f:else>
</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/Hotel/Teaser.html
+7 -1
View File
@@ -1,5 +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: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">
@@ -10,7 +11,12 @@
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{hotel.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-{hotel.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/> <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="360c"
height="270c"
alt="{hotel.name}" />
</div> </div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200"> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4"> <span class="headline--3 mb-4">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+7 -1
View File
@@ -1,5 +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: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">
@@ -10,7 +11,12 @@
<svg class="w-8 h-6 absolute top-0 left-0"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{region.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-{region.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<f:render partial="TeaserImage" arguments="{image: region.teaserImages.0}"/> <ep:lazyLoadImage image="{region.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{region.name}" />
</div> </div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<span class="headline--3 mb-4"> <span class="headline--3 mb-4">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+7 -1
View File
@@ -1,5 +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: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">
@@ -11,7 +12,12 @@
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{context.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-{context.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
</f:if> </f:if>
<f:render partial="TeaserImage" arguments="{image: teaserImage}"/> <ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{teaserImage.alternative}" />
</div> </div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<span class="headline--3 mb-4"> <span class="headline--3 mb-4">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+9 -2
View File
@@ -1,4 +1,9 @@
<f:if condition="{image.uid}"> <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> <f:then>
<picture> <picture>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
@@ -55,4 +60,6 @@
alt="" /> alt="" />
</picture> </picture>
</f:else> </f:else>
</f:if> </f:if>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+8 -3
View File
@@ -1,6 +1,7 @@
<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">
@@ -24,9 +25,13 @@
<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}">
<img class="block w-full h-auto lazyload" <ep:lazyLoadImage image="{image}"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
alt="{image.alternative}" title="{image.title}"> class="block w-full h-auto"
width="400c"
height="400"
alt="{image.alternative}"
title="{image.title}" />
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+8 -3
View File
@@ -1,7 +1,7 @@
<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:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Bare"/> <f:layout name="Bare"/>
@@ -11,7 +11,12 @@
<svg class="teaserbox__flag"> <svg class="teaserbox__flag">
<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:render partial="TeaserImage" arguments="{image: country.teaserImages.0}"/> <ep:lazyLoadImage image="{country.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{country.name}" />
</div> </div>
<div class="teaserbox__main"> <div class="teaserbox__main">
<span class="headline headline--3">{country.name}</span> <span class="headline headline--3">{country.name}</span>