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"
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">
@@ -10,7 +11,12 @@
<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>
</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 class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<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"
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">
@@ -7,7 +8,12 @@
title="{concept.name}"
class="flex flex-col">
<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="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+8 -11
View File
@@ -1,6 +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">
<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="relative max-w-md mx-auto mb-8">
<f:if condition="{image}">
<f:then>
<img class="block rounded-full w-full h-auto lazyload"
width="400"
height="400"
data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
alt="{image.alternative}" title="{image.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
<ep:lazyLoadImage image="{image}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="400"
height="400c"
alt="{image.alternative}"
title="{image.title}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+8 -10
View File
@@ -1,5 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<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="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{image}">
<f:then>
<img class="block w-full h-auto rounded-full lazyload"
width="400"
height="400"
data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
alt="{image.alternative}" title="{image.title}">
</f:then>
<f:else>
<img class="block w-full h-auto rounded-full" src="https://placehold.it/800x600" alt="">
</f:else>
<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}"
title="{image.title}" />
</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
+8 -10
View File
@@ -1,6 +1,7 @@
<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">
<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="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}">
<f:then>
<img class="block rounded-full w-full h-auto lazyload"
data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
width="400"
height="400"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
<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}"
title="{teaserImage.title}" />
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+8 -10
View File
@@ -1,5 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<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="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
<f:if condition="{teaserImage}">
<f:then>
<img class="block w-full h-auto rounded-full lazyload"
width="400"
height="400"
data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
<img class="block w-full h-auto rounded-full" src="https://placehold.it/800x600" alt="">
</f:else>
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-auto"
width="400"
height="400c"
alt="{teaserImage.alternative}"
title="{teaserImage.title}" />
</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/Hotel/Teaser.html
+7 -1
View File
@@ -1,5 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
@@ -10,7 +11,12 @@
<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>
</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 class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<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"
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">
@@ -10,7 +11,12 @@
<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>
</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 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">
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"
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">
@@ -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>
</svg>
</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 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">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+65 -58
View File
@@ -1,58 +1,65 @@
<f:if condition="{image.uid}">
<f:then>
<picture>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" data-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}"
title="{image.title}" />
</picture>
</f:then>
<f:else>
<picture>
<source media="(min-width: 1201px)" data-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(
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(
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(
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(
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="" />
</picture>
</f:else>
</f:if>
<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(
image: image, width: '370', height: '220c-100'
)} 370w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 512px)" data-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}"
title="{image.title}" />
</picture>
</f:then>
<f:else>
<picture>
<source media="(min-width: 1201px)" data-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(
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(
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(
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(
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="" />
</picture>
</f:else>
</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"
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">
@@ -24,9 +25,13 @@
<f:section name="Image">
<div class="{cssClasses}">
<f:link.typolink parameter="{image.link}">
<img class="block w-full h-auto lazyload"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
alt="{image.alternative}" title="{image.title}">
<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}"
title="{image.title}" />
</f:link.typolink>
</div>
</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"
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"/>
@@ -11,7 +11,12 @@
<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>
</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 class="teaserbox__main">
<span class="headline headline--3">{country.name}</span>