Migrate responsive background images

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js

@@ -130,12 +130,6 @@ new Vue({
         setMobileMode () {
             this.mobileMode = $window.outerWidth() < this.maxWindowWidth;
         },
-        setBackgroundImageMode () {
-            this.backgroundImageMode = this.getBackgroundImageMode();
-        },
-        getBackgroundImageMode () {
-            return $window.outerWidth() < 768 ? 'mobile' : 'desktop';
-        },
         scrollTop () {
             this.scroll(0);
         },
@@ -161,13 +155,6 @@ new Vue({
                 $nav.addClass('open').find('ul').slideDown('fast');
             }
         },
-        setResponsiveBackgroundImages () {
-            let backgroundImageMode = this.backgroundImageMode;
-            $('.responsive-bg').each(function () {
-                let imageSource = $(this).data(backgroundImageMode);
-                $(this).css('backgroundImage', 'url(' + imageSource + ')');
-            });
-        },
         initDropdownMenuBehavior () {
             const $dropdownLinks = $('.navbar-main').find('a.dropdown-toggle');
             if (this.mobileMode) {
@@ -192,11 +179,6 @@ new Vue({
             $window.on('resize', () => {
                 this.setMobileMode();
                 this.initDropdownMenuBehavior();
-                let newBackgroundImageMode = this.getBackgroundImageMode();
-                if (this.backgroundImageMode !== newBackgroundImageMode) {
-                    this.backgroundImageMode = newBackgroundImageMode;
-                    this.setResponsiveBackgroundImages();
-                }
             });
             $(document).on('click', event => {
                 const $clickedElement = $(event.target);
@@ -228,8 +210,6 @@ new Vue({
     mounted () {
         Vue.nextTick(() => {
             this.setMobileMode();
-            this.setBackgroundImageMode();
-            this.setResponsiveBackgroundImages();
             this.initListeners();
             this.initFilterpanel();
             this.initDropdownMenuBehavior();

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_herounit.scss

@@ -20,8 +20,8 @@
   display: block;
   width: 100%;
   height: 300px;
-  background-size: cover;
+  //background-size: cover;
-  background-position: right center;
+  //background-position: right center;
   @include mq($from: tablet) {
     height: 100%;
   }

public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html

@@ -14,9 +14,13 @@
                         <div class="herounit">
                             <f:alias map="{image: slide.image.0}">
                                 <f:if condition="{image}">
-                                    <div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')})"
+                                    <div class="herounit__image">
-                                         data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')}"
+                                        <picture class="w-full h-full">
-                                         data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}"></div>
+                                            <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
+                                            <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
+                                            <f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
+                                        </picture>
+                                    </div>
                                 </f:if>
                             </f:alias>
                             <div class="herounit__main">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html

@@ -3,10 +3,15 @@
 <f:if condition="{slide}">
     <div class="pagehead">
         <f:alias map="{image: slide.image.0}">
-            <div class="pagehead__image responsive-bg"
+            <div class="pagehead__image">
-                 style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeader')})"
+                <picture class="w-full h-full">
-                 data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeader')}"
+                    <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
-                 data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}"></div>
+                    <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
+                    <img class="block w-full h-full object-cover"
+                         src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
+                         alt="{image.alternative}">
+                </picture>
+            </div>
         </f:alias>
         <div class="pagehead__main">
             <div class="pagehead__inner">

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html

@@ -10,10 +10,14 @@
             <div class="splide__track">
                 <ul class="splide__list">
                     <f:for each="{product.images}" as="image" iteration="iteration">
-                        <li class="splide__slide slider__item slider__item--product responsive-bg"
+                        <li class="splide__slide slider__item slider__item--product">
-                             style="background-image: url({f:uri.image(image: image, width: '400')})"
+                            <picture class="w-full h-full">
-                             data-mobile="{f:uri.image(image: image, width: '400')}"
+                                <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
-                             data-desktop="{f:uri.image(image: image, width: '585')}">
+                                <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
+                                <img class="block w-full h-full object-cover"
+                                     src="{f:uri.image(image: image, width: '400')}"
+                                     alt="{image.alternative}">
+                            </picture>
                         </li>
                     </f:for>
                 </ul>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html

@@ -2,10 +2,11 @@
 {images -> v:iterator.first() -> v:variable.set(name: 'headerImage')}
 <div class="pagehead">
     <f:if condition="{headerImage.uid}">
-        <div class="pagehead__image responsive-bg"
+        <picture class="w-full h-full">
-             style="background-image: url({f:uri.image(image: headerImage, height: '240')})"
+            <source srcset="{f:uri.image(image: headerImage, width: '1360c', height: '360')}" media="(min-width: 768px)">
-             data-mobile="{f:uri.image(image: headerImage, height: '240')}"
+            <source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
-             data-desktop="{f:uri.image(image: headerImage, width: '1370')}"></div>
+            <f:image image="{headerImage}" width="640" class="w-full h-full object-cover" alt="{image.alternative}"/>
+        </picture>
     </f:if>
     <div class="pagehead__main">
         <div class="pagehead__inner">