diff --git a/config/_default/params.toml b/config/_default/params.toml index 61e2b9365..c79ad0811 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -11,6 +11,7 @@ autoSwitchAppearance = true enableSearch = false enableCodeCopy = false +enableImageLazyLoading = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 21378072d..d828f1205 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -11,6 +11,7 @@ autoSwitchAppearance = true enableSearch = true enableCodeCopy = true +enableImageLazyLoading = true # robots = "" fingerprintAlgorithm = "sha256" diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index 8bb275ca9..c341466a0 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/exampleSite/content/docs/configuration/index.md @@ -129,6 +129,7 @@ Many of the article defaults here can be overridden on a per article basis by sp |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.| |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.| |`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.| +|`enableImageLazyLoading`|`true`|Whether image should be lazy loading.| |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| |`fingerprintAlgorithm`|`"sha256"`|String that indicates which hashing algorithm is used when fingerprinting assets. Valid options include `md5`, `sha256`, `sha384` and `sha512`.| |`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger`, `hybrid` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.| diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 9c7096dcd..e2009a069 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -1,9 +1,17 @@ {{ $url := urls.Parse .Destination }} {{ $altText := .Text }} {{ $caption := .Title }} +{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }} {{ if findRE "^https?" $url.Scheme }}
- {{ $altText }} + {{ $altText }} {{ with $caption }}
{{ . | markdownify }}
{{ end }}
{{ else }} @@ -32,12 +40,22 @@ {{ end }} {{ end }} alt="{{ $altText }}" + {{ if $lazyLoad }} + loading="lazy" + {{ end }} /> {{ with $caption }}
{{ . | markdownify }}
{{ end }} {{ else }}
- {{ $altText }} + {{ $altText }} {{ with $caption }}
{{ . | markdownify }}
{{ end }}
{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 70e8fe888..90c5110bd 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -31,6 +31,9 @@

{{ end }} {{ end }} alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}" + {{ if $.Site.Params.enableImageLazyLoading | default true }} + loading="lazy" + {{ end }} /> {{ with $.Params.coverCaption }}
{{ . | markdownify }}
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 330cc07f6..689bdf719 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -23,6 +23,9 @@ 160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x" src="{{ (.Fill "160x120 smart").RelPermalink }}" {{ end }} + {{ if $.Site.Params.enableImageLazyLoading | default true }} + loading="lazy" + {{ end }} /> diff --git a/layouts/partials/author.html b/layouts/partials/author.html index d482d3a61..2d29aa82b 100644 --- a/layouts/partials/author.html +++ b/layouts/partials/author.html @@ -10,6 +10,9 @@ height="96" alt="{{ $.Site.Author.name | default "Author" }}" src="{{ $authorImage.RelPermalink }}" + {{ if $.Site.Params.enableImageLazyLoading | default true }} + loading="lazy" + {{ end }} /> {{ end }} {{ end }} diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html index 93ce24623..24fb6f636 100644 --- a/layouts/partials/home/profile.html +++ b/layouts/partials/home/profile.html @@ -14,6 +14,9 @@ height="144" alt="{{ $.Site.Author.name | default "Author" }}" src="{{ $authorImage.RelPermalink }}" + {{ if $.Site.Params.enableImageLazyLoading | default true }} + loading="lazy" + {{ end }} /> {{ end }} {{ end }} diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index ee1191687..1fefceb71 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -9,6 +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 }}" + {{ if .Site.Params.enableImageLazyLoading | default true }} + loading="lazy" + {{ end }} /> {{- if $logo_dark }} {{ .Site.Title }} {{- end}} diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index 9b0134426..b6d142898 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -11,6 +11,9 @@