EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extend gallery on product details page

Browse Source
This commit is contained in:
Björn Fromme
2022-03-08 09:38:12 +01:00
parent e49130de4f
commit ea078eca4a
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+18
View File
@@ -368,9 +368,25 @@
<p class="font-bold mb-2"> <p class="font-bold mb-2">
Galerie Galerie
</p> </p>
<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" <div class="grid grid-cols-4 gap-2"
data-controller="lightbox"> data-controller="lightbox">
<f:for each="{product.images}" as="image" iteration="iteration"> <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')}" <a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-lightbox-target="thumb" data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}" data-lightbox-index="{iteration.cycle}"
@@ -384,8 +400,10 @@
alt="{image.alternative}" alt="{image.alternative}"
title="{image.title}" /> title="{image.title}" />
</a> </a>
</f:if>
</f:for> </f:for>
</div> </div>
</f:if>
</div> </div>
</f:if> </f:if>
</f:section> </f:section>