add browser-level lazy loading to cover images

amend to c353447
This commit is contained in:
Aditya Telange 2021-03-27 13:16:10 +05:30
parent 009d3a2e1d
commit 2fea5a1062
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77

View File

@ -11,19 +11,19 @@
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") }}
{{- $prod := (hugo.IsProduction | or (eq .Site.Params.env "production")) }}
{{- if (and (in $processableFormats $cover.MediaType.SubType) (ne .Site.Params.cover.responsiveImages false) (eq $prod true)) }}
<img srcset="{{- range $size := $sizes -}}
<img loading="lazy" srcset="{{- range $size := $sizes -}}
{{- if (ge $cover.Width $size) -}}
{{ printf "%s %s" (($cover.Resize (printf "%sx" $size)).Permalink) (printf "%sw ," $size) -}}
{{ end }}
{{- end -}}{{$cover.Permalink }} {{printf "%dw" ($cover.Width)}}"
sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" />
{{- else }}{{/* Unprocessable image or responsive images disabled */}}
<img src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
<img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}">
{{- end }}
{{- else }}{{/* For absolute urls and external links, no img processing here */}}
{{- if $addLink }}<a href="{{ (.Params.cover.image) | absURL }}" target="_blank"
rel="noopener noreferrer">{{ end -}}
<img src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
<img loading="lazy" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
{{- end }}
{{- if $addLink }}</a>{{ end -}}
{{/* Display Caption */}}