✨ feat: Make image lazy load togglable

config/_default/params.toml

@@ -11,6 +11,7 @@ autoSwitchAppearance = true
 
 enableSearch = false
 enableCodeCopy = false
+enableImageLazyLoading = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

layouts/_default/_markup/render-image.html

@@ -3,7 +3,14 @@
 {{ $caption := .Title }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
-    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
+    <img
+      class="mx-auto my-0 rounded-md"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}" 
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
+    />
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
 {{ else }}
@@ -32,13 +39,22 @@
           {{ end }}
         {{ end }}
         alt="{{ $altText }}"
-        loading="lazy"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
     <figure>
-      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
+      <img
+        class="mx-auto my-0 rounded-md"
+        src="{{ $url.String }}"
+        alt="{{ $altText }}"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
+      />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ end }}

layouts/_default/single.html

@@ -31,7 +31,9 @@
               {{ end }}
             {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-            loading="lazy"
+            {{ if .Site.Params.enableImageLazyLoading | default true }}
+              loading="lazy"
+            {{ end }}
           />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>

layouts/partials/article-link.html

@@ -23,7 +23,9 @@
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
           {{ end }}
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       </a>
     </div>

layouts/partials/author.html

@@ -10,7 +10,9 @@
           height="96"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}

layouts/partials/home/profile.html

@@ -14,7 +14,9 @@
           height="144"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}

layouts/partials/logo.html

@@ -9,7 +9,9 @@
         height="{{ div $logo.Height 2 }}"
         class="max-h-[10rem] max-w-[10rem] object-scale-down object-left{{ if $logo_dark }} hidden dark:flex{{ end }}"
         alt="{{ .Site.Title }}"
-        loading="lazy"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{- if $logo_dark }}
       <img
@@ -18,6 +20,9 @@
         height="{{ div $logo_dark.Height 2 }}"
         class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
         alt="{{ .Site.Title }}"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{- end}}
     </a>

layouts/shortcodes/figure.html

@@ -11,7 +11,9 @@
     <img
       class="mx-auto my-0 rounded-md"
       alt="{{ $altText }}"
-      loading="lazy"
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
       {{ if findRE "^https?" $url.Scheme }}
         src="{{ $url.String }}"
       {{ else }}

layouts/shortcodes/screenshot.html

@@ -8,7 +8,9 @@
       {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
       {{- end -}}
-      loading="lazy"
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
       width="100%"
       height="auto"
       style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"