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

Properly order image sources

Browse Source
This commit is contained in:
Björn Fromme
2019-09-08 13:09:57 +02:00
parent 7bdb41eba1
commit 618f8bba97
4 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+2 -2
View File
@@ -5,9 +5,9 @@
<referrer-link :href="item.detailPageUri" :referring-page="referringPage"
rel="nofollow" title="Details &amp; Buchen">
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
<source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
<source media="(min-width: 1201px)" :data-srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
<source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
<source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
<img class="scale lazyload" :data-src="item.hotel.images.resized.s[0].url"
:title="item.hotel.images.resized.s[0].title"
:alt="item.hotel.images.resized.s[0].alt">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+14 -14
View File
@@ -109,15 +109,15 @@
<f:then>
<f:alias map="{image: item.hotel.images.original.0}">
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '280', height: '220c-100'
)} 280w"/>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '200c-100'
)} 260w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '280', height: '220c-100'
)} 280w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}">
@@ -126,18 +126,18 @@
</f:then>
<f:else>
<picture class="searchresult-item__image">
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '220', height: '130c-100'
)} 220w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '280', height: '220c-100'
)} 280w"/>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
)} 260w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '280', height: '220c-100'
)} 280w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '220', height: '130c-100'
)} 220w"/>
<img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+28 -28
View File
@@ -1,21 +1,21 @@
<f:if condition="{image.uid}">
<f:then>
<picture>
<source media="(max-width: 512px)" data-srcset="{f:uri.image(
image: image, width: '350', height: '175c-100'
)} 350w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '500', height: '250c-100'
)} 500w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '360', height: '200c-100'
)} 360w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '160c-100'
)} 320w"/>
<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"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '500', height: '250c-100'
)}" title="{image.title}" alt="{image.alternative}">
@@ -23,26 +23,26 @@
</f:then>
<f:else>
<picture>
<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"/>
<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: 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: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100'
)} 420w"/>
<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"/>
<img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100'
public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+7 -7
View File
@@ -1,17 +1,17 @@
<f:if condition="{image}">
<f:then>
<picture class="product-teaser__image">
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '200c-100'
)} 320w"/>
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '220c-100'
)} 260w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '200c-100'
<source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '220c-100'
)} 260w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100'
)} 320w"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '160c-100'