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

lazy load cover images in lists only

Browse Source
This commit is contained in:
Aditya Telange 2023-12-16 13:09:19 +05:30
parent 28ec7a407d
commit 65c2720ab9
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/list.html
View File

@ -65,7 +65,7 @@
<article class="{{ $class }}"> <article class="{{ $class }}">
{{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }} {{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
{{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} {{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
<header class="entry-header"> <header class="entry-header">
<h2> <h2>
{{- .Title }} {{- .Title }}

2
layouts/_default/single.html
View File

@ -22,7 +22,7 @@
{{- end }} {{- end }}
</header> </header>
{{- $isHidden := (.Param "cover.hiddenInSingle") | default (.Param "cover.hidden") | default false }} {{- $isHidden := (.Param "cover.hiddenInSingle") | default (.Param "cover.hidden") | default false }}
{{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden" $isHidden) }} {{- partial "cover.html" (dict "cxt" . "IsSingle" true "isHidden" $isHidden) }}
{{- if (.Param "ShowToc") }} {{- if (.Param "ShowToc") }}
{{- partial "toc.html" . }} {{- partial "toc.html" . }}
{{- end }} {{- end }}

11
layouts/partials/cover.html
View File

@ -1,9 +1,10 @@
{{- with .cxt}} {{/* Apply proper context from dict */}} {{- with .cxt}} {{/* Apply proper context from dict */}}
{{- if (and .Params.cover.image (not $.isHidden)) }} {{- if (and .Params.cover.image (not $.isHidden)) }}
{{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }} {{- $alt := (.Params.cover.alt | default .Params.cover.caption | plainify) }}
{{- $loading := cond $.IsSingle "eager" "lazy" }}
<figure class="entry-cover"> <figure class="entry-cover">
{{- $responsiveImages := (.Params.cover.responsiveImages | default site.Params.cover.responsiveImages) | default true }} {{- $responsiveImages := (.Params.cover.responsiveImages | default site.Params.cover.responsiveImages) | default true }}
{{- $addLink := (and site.Params.cover.linkFullImages (not $.IsHome)) }} {{- $addLink := (and site.Params.cover.linkFullImages $.IsSingle) }}
{{- $pageBundleCover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }} {{- $pageBundleCover := (.Resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- $globalResourcesCover := (resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }} {{- $globalResourcesCover := (resources.ByType "image").GetMatch (printf "*%s*" (.Params.cover.image)) }}
{{- $cover := (or $pageBundleCover $globalResourcesCover)}} {{- $cover := (or $pageBundleCover $globalResourcesCover)}}
@ -17,7 +18,7 @@
{{- end -}} {{- end -}}
{{- $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) ($responsiveImages) (eq $prod true)) }} {{- if (and (in $processableFormats $cover.MediaType.SubType) ($responsiveImages) (eq $prod true)) }}
<img loading="lazy" srcset="{{- range $size := $sizes -}} <img loading="{{$loading}}" 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 }}
@ -25,16 +26,16 @@
sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}" sizes="(min-width: 768px) 720px, 100vw" src="{{ $cover.Permalink }}" alt="{{ $alt }}"
width="{{ $cover.Width }}" height="{{ $cover.Height }}"> width="{{ $cover.Width }}" height="{{ $cover.Height }}">
{{- else }}{{/* Unprocessable image or responsive images disabled */}} {{- else }}{{/* Unprocessable image or responsive images disabled */}}
<img loading="lazy" src="{{ (path.Join .RelPermalink .Params.cover.image) | absURL }}" alt="{{ $alt }}"> <img loading="{{$loading}}" 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 loading="lazy" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}"> <img loading="{{$loading}}" src="{{ (.Params.cover.image) | absURL }}" alt="{{ $alt }}">
{{- end }} {{- end }}
{{- if $addLink }}</a>{{ end -}} {{- if $addLink }}</a>{{ end -}}
{{/* Display Caption */}} {{/* Display Caption */}}
{{- if not $.IsHome }} {{- if $.IsSingle }}
{{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }} {{ with .Params.cover.caption }}<p>{{ . | markdownify }}</p>{{- end }}
{{- end }} {{- end }}
</figure> </figure>