Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: include news galery fancybox

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-16 22:05:03 +01:00
parent 2604436c7c
commit 8df5bff3c8
4 changed files with 64 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/base/Resources/Private/Extensions/News/Templates/News/Detail.html
View File

@@ -1,11 +1,39 @@
<f:layout name="General" />
<f:section name="content">
<script>
// Initialize Fancybox for elements with data-fancybox="gallery"
document.addEventListener("DOMContentLoaded", function() {
Fancybox.bind("[data-fancybox='gallery']", {});
});
</script>
<!-- First image if present -->
<f:if condition="{newsItem.media}">
<div class="news-detail__main-image">
<figure>
<f:image image="{newsItem.media.0.originalResource}" alt="{newsItem.media.0.originalResource.alternative}" title="{newsItem.media.0.originalResource.title}" loading="lazy" />
<picture>
<source
type="image/webp"
srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320', fileExtension:'webp')} 320w,
{f:uri.image(image: newsItem.media.0.originalResource, width:'640', fileExtension:'webp')} 640w,
{f:uri.image(image: newsItem.media.0.originalResource, width:'1024', fileExtension:'webp')} 1024w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
/>
<source
type="image/jpeg"
srcset="{f:uri.image(image: newsItem.media.0.originalResource, width:'320')} 320w,
{f:uri.image(image: newsItem.media.0.originalResource, width:'640')} 640w,
{f:uri.image(image: newsItem.media.0.originalResource, width:'1024')} 1024w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
/>
<img
src="{f:uri.image(image: newsItem.media.0.originalResource, width:'1024')}"
alt="{newsItem.media.0.originalResource.alternative}"
title="{newsItem.media.0.originalResource.title}"
loading="lazy"
/>
</picture>
</figure>
</div>
</f:if>
@@ -29,7 +57,6 @@
<!-- Content elements if present -->
<f:if condition="{newsItem.contentElements}">
<!-- content elements -->
<div class="news-detail__content-elements">
<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
</div>
@@ -38,10 +65,36 @@
<!-- Gallery if more than one picture -->
<f:if condition="{f:count(subject: newsItem.media)} > 1">
<div class="news-detail__gallery news-detail__gallery--grid">
<f:for each="{newsItem.media}" as="mediaItem" iteration="iterator">
<figure class="news-detail__gallery-item">
<f:image image="{mediaItem.originalResource}" alt="{mediaItem.originalResource.alternative}" title="{mediaItem.originalResource.title}" loading="lazy" />
</figure>
<f:for each="{newsItem.media}" as="mediaItem">
<a href="{f:uri.image(image: mediaItem.originalResource)}"
data-fancybox="gallery"
data-caption="{mediaItem.originalResource.title}"
class="news-detail__gallery-link">
<figure class="news-detail__gallery-item">
<picture>
<source
type="image/webp"
srcset="{f:uri.image(image: mediaItem.originalResource, width:'320', fileExtension:'webp')} 320w,
{f:uri.image(image: mediaItem.originalResource, width:'640', fileExtension:'webp')} 640w,
{f:uri.image(image: mediaItem.originalResource, width:'1024', fileExtension:'webp')} 1024w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
/>
<source
type="image/jpeg"
srcset="{f:uri.image(image: mediaItem.originalResource, width:'320')} 320w,
{f:uri.image(image: mediaItem.originalResource, width:'640')} 640w,
{f:uri.image(image: mediaItem.originalResource, width:'1024')} 1024w"
sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, 1024px"
/>
<img
src="{f:uri.image(image: mediaItem.originalResource, width:'1024')}"
alt="{mediaItem.originalResource.alternative}"
title="{mediaItem.originalResource.title}"
loading="lazy"
/>
</picture>
</figure>
</a>
</f:for>
</div>
</f:if>