From ea078eca4a3845e8aec1845b14bb6bfd627e1dbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 8 Mar 2022 09:38:12 +0100
Subject: [PATCH] Extend gallery on product details page

---
 .../Private/Templates/Product/Detail.html     | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index 4d106b78..a6a603c2 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -368,24 +368,42 @@
                 <p class="font-bold mb-2">
                     Galerie
                 </p>
-                <div class="grid grid-cols-4 gap-2"
-                     data-controller="lightbox">
-                    <f:for each="{product.images}" as="image" iteration="iteration">
-                        <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
-                           data-lightbox-target="thumb"
-                           data-lightbox-index="{iteration.cycle}"
-                           data-lightbox-caption="{image.originalResource.description}"
-                           data-action="lightbox#open">
-                            <ep:lazyLoadImage image="{image}"
-                                              loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
-                                              class="block w-full h-auto"
-                                              width="160"
-                                              height="160c+100"
-                                              alt="{image.alternative}"
-                                              title="{image.title}" />
-                        </a>
-                    </f:for>
-                </div>
+                <a href="{f:uri.image(image: product.images.0, cropVariant: 'zoom', maxWidth: '2560')}"
+                   data-lightbox-target="thumb"
+                   data-lightbox-index="{iteration.cycle}"
+                   data-lightbox-caption="{image.originalResource.description}"
+                   data-action="lightbox#open"
+                   class="mb-2">
+                    <ep:lazyLoadImage image="{product.images.0}"
+                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                      class="block w-full h-auto"
+                                      width="400"
+                                      height="225c+100"
+                                      alt="{image.alternative}"
+                                      title="{image.title}" />
+                </a>
+                <f:if condition="{product.images -> f:count()} > 1">
+                    <div class="grid grid-cols-4 gap-2"
+                         data-controller="lightbox">
+                        <f:for each="{product.images}" as="image" iteration="iteration">
+                            <f:if condition="{iteration.index} > 0">
+                                <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
+                                   data-lightbox-target="thumb"
+                                   data-lightbox-index="{iteration.cycle}"
+                                   data-lightbox-caption="{image.originalResource.description}"
+                                   data-action="lightbox#open">
+                                    <ep:lazyLoadImage image="{image}"
+                                                      loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
+                                                      class="block w-full h-auto"
+                                                      width="160"
+                                                      height="160c+100"
+                                                      alt="{image.alternative}"
+                                                      title="{image.title}" />
+                                </a>
+                            </f:if>
+                        </f:for>
+                    </div>
+                </f:if>
             </div>
         </f:if>
     </f:section>