From 6a48feeebf06f229948cadce03d44cf329a01468 Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Wed, 20 Oct 2021 13:49:25 +0200
Subject: [PATCH] [TASK] Enable lazy loading for all images

---
 Resources/Private/Partials/General/FeaturedImage.html      | 2 +-
 Resources/Private/Partials/List/Author.html                | 2 +-
 Resources/Private/Partials/Meta/Elements/Authors.html      | 2 +-
 Resources/Private/Partials/Post/Author.html                | 2 +-
 Resources/Private/Templates/Backend/SocialImageWizard.html | 2 +-
 Resources/Private/Templates/PageLayout/Header.html         | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Resources/Private/Partials/General/FeaturedImage.html b/Resources/Private/Partials/General/FeaturedImage.html
index 921021d4..104d98de 100644
--- 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
index b3376348..d63b32ef 100644
--- 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
index 5626c49c..ed5bdfbc 100644
--- 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
index c82c3792..8239e745 100644
--- 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
index 23cf3232..800662da 100644
--- 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
index 22de482c..56f8aec9 100644
--- 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>