Add sidebar gallery on product detail page

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>