From 3dea1601d28746b8853c9a697ebc3e188185a961 Mon Sep 17 00:00:00 2001
From: Sebastian Fischer <typo3@evoweb.de>
Date: Tue, 21 Jan 2025 21:00:18 +0100
Subject: [PATCH] [TASK] Add fileExtension to image rendering

---
 Resources/Private/Templates/Post/ListLatestPosts.html | 4 ++--
 Resources/Private/Templates/Post/ListRecentPosts.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Resources/Private/Templates/Post/ListLatestPosts.html b/Resources/Private/Templates/Post/ListLatestPosts.html
index e40f5d2..a1f9e59 100644
--- a/Resources/Private/Templates/Post/ListLatestPosts.html
+++ b/Resources/Private/Templates/Post/ListLatestPosts.html
@@ -5,8 +5,8 @@
 <f:section name="Content">
     <f:if condition="{posts.0} && {posts.0.featuredImage}">
     <f:asset.css identifier="blog_latest_featured_image">
-        @media (max-width:1023px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="908" maxHeight="c320"/>); } }
-        @media (min-width:1024px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="910" maxHeight="1080"/>); } }
+        @media (max-width:1023px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="908" maxHeight="c320" fileExtension="webp"/>); } }
+        @media (min-width:1024px){ .bg-featured-image { --featured-image-url: url(<f:uri.image image="{posts.0.featuredImage}" cropVariant="latest" maxWidth="910" maxHeight="1080" fileExtension="webp"/>); } }
     </f:asset.css>
     </f:if>
 
diff --git a/Resources/Private/Templates/Post/ListRecentPosts.html b/Resources/Private/Templates/Post/ListRecentPosts.html
index 2505710..925755f 100644
--- a/Resources/Private/Templates/Post/ListRecentPosts.html
+++ b/Resources/Private/Templates/Post/ListRecentPosts.html
@@ -22,7 +22,7 @@
     <f:if condition="{post.featuredImage}">
         <f:then>
             <f:link.page pageUid="{post.uid}" title="{post.title}" class="row-span-full">
-                <img src="{f:uri.image(image: post.featuredImage, width: 140, height: 140, cropVariant: 'list')}"
+                <img src="{f:uri.image(image: post.featuredImage, width: 140, height: 140, cropVariant: 'list', fileExtension: 'webp')}"
                      alt="{post.featuredImage.alternative}"
                      class="w-36 h-36"/>
             </f:link.page>