From 36c7628beead1963db62e69779911fc5705b6a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 8 Mar 2022 21:24:19 +0100
Subject: [PATCH] Remove slider in header of product detail page

---
 .../Partials/Product/HeaderDetail.html        | 158 ++++++++----------
 1 file changed, 73 insertions(+), 85 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index 6c5d3235..81c48820 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -2,94 +2,82 @@
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="splide"
-         data-controller="slider"
-         data-slider-preset-value="header">
-        <div class="splide__track">
-            <ul class="splide__list">
-                <f:for each="{product.images}" as="image" iteration="iteration">
-                    <li class="splide__slide">
-                        <div class="herounit h-80 lg:h-96 mb-8">
-                            <picture>
-                                <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
-                                <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
-                                <f:image class="block w-full h-full object-cover"
-                                         image="{image}"
-                                         height="320"
-                                         cropVariant="sliderPageHeader"
-                                         alt="{image.alternative}"/>
-                            </picture>
-                            <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
-                                <div class="lg:container">
-                                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
-                                        <span class="block text-xl md:text-2xl font-bold text-white uppercase">
-                                            {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
-                                        </span>
-                                        <span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
-                                            {product.region.name}
-                                        </span>
-                                        <div class="flex items-center space-x-4 mt-4">
-                                            <svg class="w-8 h-6 md:w-10 md:h-8">
-                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
-                                            </svg>
-                                            <f:if condition="{hotel}">
-                                                <f:then>
-                                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
-                                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
-                                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
-                                                        </svg>
-                                                    </a>
-                                                </f:then>
-                                                <f:else>
-                                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
-                                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
-                                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
-                                                        </svg>
-                                                    </a>
-                                                </f:else>
-                                            </f:if>
-                                            <f:if condition="{product.concept}">
-                                                <div class="bg-concept-{product.concept.code} flex items-center text-white font-semibold leading-none uppercase h-6 md:h-8 px-2">
-                                                    {product.concept.name}
-                                                </div>
-                                            </f:if>
-                                        </div>
-                                        <f:if condition="{referringUrl}">
-                                            <a href="{referringUrl}" class="button button--small mt-8">
-                                                <svg class="w-4 h-4 text-white">
-                                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-left"></use>
-                                                </svg>
-                                                <span>{backlinkLabel}</span>
-                                            </a>
-                                        </f:if>
-                                    </div>
-                                </div>
-                                <f:render partial="Badge" arguments="{badge: product.badge}"/>
-                            </div>
-                            <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
-                                <div class="herounit__badge-wrapper">
-                                    <f:link.typolink parameter="{settings.skipassPageUid}"
-                                                     title="Skipass inklusive"
-                                                     class="herounit__badge herounit__badge--skipass">
-                                        <p class="uppercase text-4xl font-bold leading-7 mb-2">
-                                            Ski-<br>Pass
-                                        </p>
-                                        <p class="uppercase">
-                                            inklusive
-                                        </p>
-                                    </f:link.typolink>
-                                </div>
+    <f:alias map="{image: product.images.0}">
+        <div class="herounit h-80 lg:h-96 mb-8">
+            <picture>
+                <source srcset="{f:uri.image(image: image, width: '1370c', height: '380c')}" media="(min-width: 768px)">
+                <source srcset="{f:uri.image(image: image, height: '320c')}" media="(max-width: 767px)">
+                <f:image class="block w-full h-full object-cover"
+                         image="{image}"
+                         height="320c"
+                         alt="{image.alternative}"/>
+            </picture>
+            <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
+                <div class="lg:container">
+                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                        <span class="block text-xl md:text-2xl font-bold text-white uppercase">
+                            {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
+                        </span>
+                        <span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
+                            {product.region.name}
+                        </span>
+                        <div class="flex items-center space-x-4 mt-4">
+                            <svg class="w-8 h-6 md:w-10 md:h-8">
+                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
+                            </svg>
+                            <f:if condition="{hotel}">
+                                <f:then>
+                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
+                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
+                                        </svg>
+                                    </a>
+                                </f:then>
+                                <f:else>
+                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
+                                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
+                                        </svg>
+                                    </a>
+                                </f:else>
                             </f:if>
-                            <f:if condition="{slide.image.0.description}">
-                                <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
-                                    {slide.image.0.description -> f:format.htmlspecialchars()}
+                            <f:if condition="{product.concept}">
+                                <div class="bg-concept-{product.concept.code} flex items-center text-white font-semibold leading-none uppercase h-6 md:h-8 px-2">
+                                    {product.concept.name}
                                 </div>
                             </f:if>
                         </div>
-                    </li>
-                </f:for>
-            </ul>
+                        <f:if condition="{referringUrl}">
+                            <a href="{referringUrl}" class="button button--small mt-8">
+                                <svg class="w-4 h-4 text-white">
+                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-left"></use>
+                                </svg>
+                                <span>{backlinkLabel}</span>
+                            </a>
+                        </f:if>
+                    </div>
+                </div>
+                <f:render partial="Badge" arguments="{badge: product.badge}"/>
+            </div>
+            <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
+                <div class="herounit__badge-wrapper">
+                    <f:link.typolink parameter="{settings.skipassPageUid}"
+                                     title="Skipass inklusive"
+                                     class="herounit__badge herounit__badge--skipass">
+                        <p class="uppercase text-4xl font-bold leading-7 mb-2">
+                            Ski-<br>Pass
+                        </p>
+                        <p class="uppercase">
+                            inklusive
+                        </p>
+                    </f:link.typolink>
+                </div>
+            </f:if>
+            <f:if condition="{slide.image.0.description}">
+                <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
+                    {slide.image.0.description -> f:format.htmlspecialchars()}
+                </div>
+            </f:if>
         </div>
-    </div>
-
+    </f:alias>
 </html>