From 618f8bba97da5be771ebdff1d80feb66a999597d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Sun, 8 Sep 2019 13:09:57 +0200
Subject: [PATCH] Properly order image sources

---
 .../Assets/js/components/SearchResultItem.vue |  4 +-
 .../Private/Partials/Hotel/TeaserWide.html    | 28 +++++-----
 .../Private/Partials/TeaserImage.html         | 56 +++++++++----------
 .../Private/Partials/TeaserWideImage.html     | 14 ++---
 4 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
index d2951a88..5ab7a32a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
@@ -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">
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
index e87fd161..bf7515cf 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
@@ -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'
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 26541bc0..6c6a48fa 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
@@ -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'
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 4d9417ac..f3dffe78 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
@@ -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'