[TASK] Enable lazy loading for all images

TYPO3GmbH · Oct 20, 2021 · 6a48fee · 6a48fee
1 parent 333e663
commit 6a48fee
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/Resources/Private/Partials/General/FeaturedImage.html b/Resources/Private/Partials/General/FeaturedImage.html
@@ -2,6 +2,6 @@
     <f:variable name="height" value="{f:if(condition: settings.height, then: settings.height, else: '400c')}" />
     <f:variable name="width" value="{f:if(condition: settings.width, then: settings.width, else: '1140')}" />
     <figure class="blogimage blogimage--featured">
-        <f:image image="{image}" alt="{image.alternative}" title="{image.title}" height="{height}" width="{width}" />
+        <f:image loading="lazy" image="{image}" alt="{image.alternative}" title="{image.title}" height="{height}" width="{width}" />
     </figure>
 </f:if>
diff --git a/Resources/Private/Partials/List/Author.html b/Resources/Private/Partials/List/Author.html
@@ -2,7 +2,7 @@
     <div class="bloglist__image">
         <f:variable name="avatarsize" value="{settings.authors.avatar.provider.size as integer}" />
         <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="32" /></f:else></f:if>
-        <img class="bloglist__imageavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
+        <img loading="lazy" class="bloglist__imageavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
     </div>
     <h2 class="bloglist__title" itemprop="name">
         <blogvh:link.author author="{author}" />

diff --git a/Resources/Private/Partials/Meta/Elements/Authors.html b/Resources/Private/Partials/Meta/Elements/Authors.html
@@ -14,7 +14,7 @@
                         <f:if condition="{avatarSettings.enable}">
                             <f:variable name="avatarsize" value="{avatarSettings.size as integer}" />
                             <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="24" /></f:else></f:if>
-                            <span class="postmetagroup__listprefix"><img class="postmetagroup__listavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image"></span>
+                            <span class="postmetagroup__listprefix"><img loading="lazy" class="postmetagroup__listavatar blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image"></span>
                         </f:if>
                         <span class="postmetagroup__listtext" data-prefix="{f:translate(key:'meta.authors.author')}"><f:render section="ProfileLink" arguments="{author: author}" contentAs="content">{author.name}</f:render></span>
                     </span>

diff --git a/Resources/Private/Partials/Post/Author.html b/Resources/Private/Partials/Post/Author.html
@@ -3,7 +3,7 @@
         <div class="postauthor__avatar">
             <f:variable name="avatarsize" value="{settings.authors.avatar.provider.size as integer}" />
             <f:if condition="{avatarsize}"><f:else><f:variable name="avatarsize" value="32" /></f:else></f:if>
-            <img class="postauthor__avatarimage blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
+            <img loading="lazy" class="postauthor__avatarimage blogavatar" height="{avatarsize}" width="{avatarsize}" src="{author.avatar}" itemprop="image">
         </div>
         <div class="postauthor__body">
             <div class="postauthor__intro"><f:translate key="author.aboutTheAuthor"/></div>

diff --git a/Resources/Private/Templates/Backend/SocialImageWizard.html b/Resources/Private/Templates/Backend/SocialImageWizard.html
@@ -1,6 +1,6 @@
 <div class="hidden">
     <span id="author">{postData.authors.0}</span>
-    <img src="/{postData.image}" id="posterImage">
+    <img loading="lazy" src="/{postData.image}" id="posterImage">
 </div>
 <div>
     <div class="row" id="waitState" style="display: none;">

diff --git a/Resources/Private/Templates/PageLayout/Header.html b/Resources/Private/Templates/PageLayout/Header.html
@@ -45,7 +45,7 @@ <h3 class="blog-pageheader-section-title"><f:translate key="pagelayout.section.f
                     <div class="blog-pageheader-section-content">
                         <f:if condition="{post.featuredImage}">
                             <f:then>
-                                <f:image class="blog-pageheader-image" image="{post.featuredImage}" alt="{post.featuredImage.alternative}" title="{post.featuredImage.title}" height="100c" width="200" />
+                                <f:image loading="lazy" class="blog-pageheader-image" image="{post.featuredImage}" alt="{post.featuredImage.alternative}" title="{post.featuredImage.title}" height="100c" width="200" />
                             </f:then>
                             <f:else>
                                 <p><f:translate key="pagelayout.message.nofeaturedimage" extensionName="blog" /></p>