image: add lazy loading image effect option #803

exampleSite/config/_default/params.toml

@@ -331,6 +331,8 @@ image.errorlevel = "warning"
 # Default: false
 imageEffects.border = true
 # Default: true
+imageEffects.lazy = true
+# Default: true
 imageEffects.lightbox = true
 # Default: false
 imageEffects.shadow = false

exampleSite/content/basics/migration/_index.en.md

@@ -20,6 +20,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 ## 5.26.0.beta (XXX) {#5260}
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The lazy loading of images is now configurable by using the new `lazy` [image effect](cont/imageeffects). The default value hasn't changed in comparison to older versions, you don't need to change anything.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to [adjust the max width of the main area](basics/customization#change-the-main-areas-max-width), eg. in case you want to use the full page width for your content.
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Images and Codefences are now respecting [Hugo's Markdown attributes](https://gohugo.io/content-management/markdown-attributes/).

exampleSite/content/cont/frontmatter/frontmatter.toml

@@ -169,6 +169,8 @@ highlightWrap = true
 # Default: false
 imageEffects.border = true
 # Default: true
+imageEffects.lazy = true
+# Default: true
 imageEffects.lightbox = true
 # Default: false
 imageEffects.shadow = false

exampleSite/content/cont/imageeffects.en.md

@@ -5,7 +5,14 @@ weight = 5
 
 The theme supports non-standard [image effects](cont/markdown#image-effects).
 
-As described, you can add this to the URL query parameter, but this may be cumbersome to do it consistently for the whole page.
+| Name     | Description                                                       |
+| -------- | ----------------------------------------------------------------- |
+| border   | Draws a light thin border around the image                        |
+| lazy     | Lets the image be lazy loaded                                     |
+| lightbox | The image will be clickable to show it enlarged                   |
+| shadow   | Draws a shadow around the image to make it appear hovered/glowing |
+
+As [described](cont/markdown#image-effects), you can add this to the URL query parameter, but this may be cumbersome to be done consistently for the whole page.
 
 Instead, you can configure the defaults in your `hugo.toml` aswell as overriding these default in the pages frontmatter.
 
@@ -17,6 +24,7 @@ Without any settings in your `hugo.toml` this defaults to
 [params]
   [params.imageEffects]
     border = false
+    lazy = true
     lightbox = true
     shadow = false
 {{< /multiconfig >}}
@@ -38,6 +46,7 @@ The settings applied to the above image would be
 
 {{< multiconfig >}}
 border = true
+lazy = true
 lightbox = false
 shadow = false
 bg-white = true
@@ -46,7 +55,7 @@ bg-white = true
 This ends up in the following HTML where the parameter are converted to CSS classes.
 
 ````html {title="HTML"}
-<img src="https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true" alt="Minion" class="bg-white border nolightbox noshadow">
+<img src="https://octodex.github.com/images/minion.png?lightbox=false&bg-white=true" loading="lazy" alt="Minion" class="bg-white border lazy nolightbox noshadow">
 ````
 
 

layouts/partials/shortcodes/image.html

@@ -6,7 +6,7 @@
 {{- $url := .url }}
 {{- $title := .title }}
 {{- $alt := .alt }}
-{{- $effects := dict "border" false "lightbox" true "shadow" false }}
+{{- $effects := dict "border" false "lazy" true "lightbox" true "shadow" false }}
 {{- if $page.Site.Params.imageeffects }}
   {{- $effects = merge $effects $page.Site.Params.imageeffects }}
 {{- end }}
@@ -75,8 +75,11 @@
   {{- $c := printf "%s%s" (cond $v "" "no") $k }}
   {{- $classes = $classes | append $c }}
 {{- end }}
-{{- $attributes := merge .attributes (dict "alt" $alt "src" $url "title" $title "loading" "lazy") }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
+{{- $attributes := merge .attributes (dict "alt" $alt "src" $url "title" $title) }}
+{{- if $effects.lazy }}
+  {{- $attributes = merge $attributes (dict "loading" "lazy") }}
+{{- end }}
 {{- if $effects.lightbox -}}
 <a href="#R-image-{{ $id }}" class="lightbox-link">
 {{- end }}