From 6115777576db79cc97b9b65499ded438d95f5d51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 21 Dec 2021 17:22:54 +0100
Subject: [PATCH] Add sidebar gallery on product detail page

---
 .../Private/Templates/Product/Detail.html     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

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 1e6e0835..20a6e0c0 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
@@ -195,6 +195,7 @@
     </f:section>
 
     <f:section name="Sidebar">
+        <f:render section="SidebarGallery" arguments="{_all}"/>
         <f:render section="Calendar" arguments="{_all}"/>
         <f:render partial="Facts" arguments="{facts: product.facts}"/>
         <f:if condition="{product.video}">
@@ -351,4 +352,24 @@
         </div>
     </f:section>
 
+    <f:section name="SidebarGallery">
+        <f:if condition="{product.images}">
+            <div class="bg-gray-50 p-4 mb-4 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">
+                        <img data-src="{f:uri.image(image: image, width: '160', height: '160c+100')}"
+                             class="block w-full h-auto lazyload"
+                             alt="{image.alternative}"
+                             title="{image.title}">
+                    </a>
+                </f:for>
+            </div>
+        </f:if>
+    </f:section>
+
 </html>