From 5583e2bd9368286e58b99cc317a79e1e523fc056 Mon Sep 17 00:00:00 2001
From: Johannes Kreiner <johannes@sgalinski.de>
Date: Mon, 4 Mar 2024 12:09:20 +0100
Subject: [PATCH] [TASK] Drastically reduce thumbnail image file sizes
---
.../Templates/Bootstrap5/Youtube/Index.html | 14 ++++++++++----
1 file changed, 10 insertions(+), 4 deletions(-)
diff --git a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
index ab304ab..5ff1472 100644
--- a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
+++ b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
@@ -95,7 +95,9 @@
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars,
feedIterator: 0,
- contentUid: contentUid
+ contentUid: contentUid,
+ width: '830c',
+ height: '467'
}" />
</div>
<div class="col-12 col-md-3 position-relative d-flex justify-content-center d-md-block">
@@ -109,7 +111,9 @@
titleChars: settings.maxTitleChars,
descChars: settings.maxDescriptionChars,
feedIterator: feedIterator.index,
- contentUid: contentUid
+ contentUid: contentUid,
+ width: '600c',
+ height: '338'
}" />
</div>
</f:if>
@@ -127,6 +131,8 @@
<f:variable name="hasText"><f:if condition="{settings.showTitle} || {settings.showDescription}">1</f:if></f:variable>
<f:variable name="hasDescription"><f:if condition="{settings.showDescription} && {feedItem.description}">1</f:if></f:variable>
<f:variable name="itemClasses"><f:if condition="{isRowsLayout}"><f:then>hstack flex-wrap gap-4 gap-sm-6 align-items-start</f:then><f:else>card shadow-small border-top h-100</f:else></f:if></f:variable>
+ <f:variable name="thumbnailWidth"><f:if condition="{width}"><f:then>{width}</f:then><f:else>1200c</f:else></f:if></f:variable>
+ <f:variable name="thumbnailHeight"><f:if condition="{height}"><f:then>{height}</f:then><f:else>675</f:else></f:if></f:variable>
<div class="sg-video__item {itemClasses}">
<f:if condition="{feedItem.thumbnail}">
@@ -140,10 +146,10 @@
<div class="overflow-hidden">
<f:if condition="{feedItem.thumbnailImageObject}">
<f:then>
- <vi:picture class="sg-video__image object-fit-cover h-100 w-100" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
+ <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
</f:then>
<f:else>
- <vi:picture class="sg-video__image object-fit-cover h-100 w-100" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
+ <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
</f:else>
</f:if>
</div>
--
GitLab