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">
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>