mirrors/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2023-12-21 10:22:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

add browser-level lazy loading to cover images

Browse Source 
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
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/partials/cover.html
View File

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