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
+36 -18
View File
@@ -368,24 +368,42 @@
<p class="font-bold mb-2"> <p class="font-bold mb-2">
Galerie Galerie
</p> </p>
<div class="grid grid-cols-4 gap-2" <a href="{f:uri.image(image: product.images.0, cropVariant: 'zoom', maxWidth: '2560')}"
data-controller="lightbox"> data-lightbox-target="thumb"
<f:for each="{product.images}" as="image" iteration="iteration"> data-lightbox-index="{iteration.cycle}"
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}" data-lightbox-caption="{image.originalResource.description}"
data-lightbox-target="thumb" data-action="lightbox#open"
data-lightbox-index="{iteration.cycle}" class="mb-2">
data-lightbox-caption="{image.originalResource.description}" <ep:lazyLoadImage image="{product.images.0}"
data-action="lightbox#open"> loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
<ep:lazyLoadImage image="{image}" class="block w-full h-auto"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" width="400"
class="block w-full h-auto" height="225c+100"
width="160" alt="{image.alternative}"
height="160c+100" title="{image.title}" />
alt="{image.alternative}" </a>
title="{image.title}" /> <f:if condition="{product.images -> f:count()} > 1">
</a> <div class="grid grid-cols-4 gap-2"
</f:for> data-controller="lightbox">
</div> <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> </div>
</f:if> </f:if>
</f:section> </f:section>