Homepage and category pages have posts list. Each item has post image, post title etc.
I’d like to make the first post item in a list not lazy, so the image is loaded instantly on mobile devices.
generated html:
<div class="loop-wrap">
<article class="post-card">
<div class="featured-image">
<a href="/pagelink/" class="card-link" aria-label="Page Title"></a>
<img srcset="/home-office-gbd591828c_hu0f5a458a9401493855cf19b7f0eb18b5_233090_300x0_resize_q75_box.jpg 300w,
/home-office-gbd591828c_resize_q75_box.jpg 600w,
/home-office-gbd591828c_resize_q75_box.jpg 1200w" sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="/home-office-gbd591828c.jpg" loading="lazy" alt="Title">
</div>
<div class="about-post">
... redacted
</div>
</article>
</div>
imgoptim.html partial
{{- $src := .Page.Resources.GetMatch .Params.image }}
{{- $alt := .Params.title }}
{{- with $src }}
<img srcset='
{{- if ge .Width "300" -}}
{{ (.Resize "300x").RelPermalink }} 300w,
{{ end }}
{{- if ge .Width "600" -}}
{{ (.Resize "600x").RelPermalink }} 600w,
{{ end }}
{{- if ge .Width "1200" -}}
{{ (.Resize "1200x").RelPermalink }} 1200w{{ end }}' sizes="(max-width:480px) 300px, (max-width:768px) 600px, 1200px" src="{{ .RelPermalink }}" loading="lazy" alt="{{ $alt }}">
{{ end }}
pagination.html partial
<section>
<div class="latest-posts-section">
<div class="loop-wrap">
{{- $paginator := .Paginate .RegularPages -}}
{{ if $paginator }}
{{- range $paginator.Pages -}}
{{ partial "post-card.html" . }}
{{ end }}
</div>
<div class="break"></div>
<div class="pagination">
<a href="{{ .RelPermalink }}page/2/" aria-label="Load more"></a>
<button class="button-primary">Load more</button>
</div>
{{ end }}
</div>
</section>
idarek
February 4, 2023, 10:30pm
2
I faceted this sometime and received an answer here. My solution was:
{{ $p := where site.RegularPages "Params.hidden" "ne" true }}
{{ $pp := (.Paginate $p).Pages }}
{{ range $pp }}
{{ if eq (index $pp 0).Permalink .Permalink }} loading="eager" fetchpriority="high" {{ else }} loading="lazy" fetchpriority="low" {{ end }}>
{{ end }}
And I used this in my layout for loading first image eager and others in the list with lazy loading like that (index.html).
{{ partial "head.html" . }}
<body>
<div>
{{ partial "header.html" . }}
<div id="main">
{{ $p := where site.RegularPages "Params.hidden" "ne" true }}
{{ $pp := (.Paginate $p).Pages }}
{{ range $pp }}
<article class="article listed">
{{ partial "article-category.html" . }}
{{ if .Title }}
<div class="title">
<div class="article-title"><a href="{{ .Permalink }}">{{ .Title }}</a></div>
</div>
{{ end }}
{{- if not .Params.omitDate }}
<div class="article-meta">
{{ partial "article-publish.html" . }}
{{ if ne .Date .Lastmod }}
{{ partial "article-lastmod.html" . }}
{{ end }}
{{ partial "article-readtime.html" . }}
</div>
{{ end -}}
</div>
{{ if .Params.featuredImage }}
<a class="article-title" href="{{ .Permalink }}">
{{ $ftimgsrc := resources.Get .Params.featuredImage }}
{{ $isJPG := eq (path.Ext .Params.featuredImage) ".jpg" }}
{{ $isJPEG := eq (path.Ext .Params.featuredImage) ".jpeg" }}
{{ $isPNG := eq (path.Ext .Params.featuredImage) ".png" }}
<div class="featured-media">
<picture>
{{ if or ($isJPG) ($isJPEG) ($isPNG) }}
{{ $smallw := "480x webp" }}
{{ $mediumw := "960x webp" }}
{{ $largew := "1920x webp" }}
{{ $originw := (printf "%dx webp" $ftimgsrc.Width) }}
{{ $data := newScratch }}
{{ if ge $ftimgsrc.Width 480 }}
{{ $data.Set "small" ($ftimgsrc.Resize $smallw) }}
{{ else }}
{{ $data.Set "small" ($ftimgsrc.Resize $originw) }}
{{ end }}
{{ if ge $ftimgsrc.Width 960 }}
{{ $data.Set "medium" ($ftimgsrc.Resize $mediumw) }}
{{ else }}
{{ $data.Set "medium" ($ftimgsrc.Resize $originw) }}
{{ end }}
{{ if ge $ftimgsrc.Width 1920 }}
{{ $data.Set "large" ($ftimgsrc.Resize $largew) }}
{{ else }}
{{ $data.Set "large" ($ftimgsrc.Resize $originw) }}
{{ end }}
{{ $small := $data.Get "small" }}
{{ $medium := $data.Get "medium" }}
{{ $large := $data.Get "large" }}
<source media="(max-width: 480px)"
srcset="{{with $medium.RelPermalink }}{{.}}{{ end }} 2x,
{{with $small.RelPermalink }}{{.}}{{ end }}"
type="image/webp">
<source media="(max-width: 834px)"
srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
{{with $medium.RelPermalink }}{{.}}{{ end }}"
type="image/webp">
<source media="(min-width: 835px)"
srcset="{{with $large.RelPermalink }}{{.}}{{ end }} 2x,
{{with $medium.RelPermalink }}{{.}}{{ end }}"
type="image/webp">
{{ end }}
<img
src="{{ $ftimgsrc.Permalink | safeURL }}"
alt="{{ .Title }}"
decoding="async"
{{ if or ($isJPG) ($isJPEG) ($isPNG) }}width="{{ $ftimgsrc.Width }}"
height="{{ $ftimgsrc.Height }}"{{ end }}
{{ if eq (index $pp 0).Permalink .Permalink }} loading="eager" fetchpriority="high" {{ else }} loading="lazy" fetchpriority="low" {{ end }}>
</picture>
</div>
</a>
{{ end }}
<div class="article-entry">
{{ .Summary }}
{{ partial "article-readmore.html" . }}
{{ partial "article-tags.html" . }}
</div>
</article>
{{ end }}
{{ partial "pagination.html" . }}
</div>
{{ partial "footer.html" . }}
</div>
<!--{{ partial "script-delay.html" . }}-->
</body>
</html>
Instead of passing just the page in context to the partial, you need to pass the page and someway of telling the partial to add the loading attribute with value set to lazy.
Something like…
{{ $p := where site.RegularPages "Type" "posts" }}
{{ range $k, $_ := (.Paginate $p).Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
{{ $lazy := false }}
{{ if $k }}
{{ $lazy = true }}
{{ end }}
<div>{{ partial "post-card.html" (dict "page" . "lazy" $lazy) }}</div>
{{ end }}
{{ template "_internal/pagination.html" }}
Then in your partial, something like…
{{ $page := .page }}
{{ $lazy := .lazy }}
{{ with $page.Resources.Get "cover.jpg" }}
{{ with .Resize "150x webp" }}
{{ if $lazy }}
<img loading="lazy" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ else }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}
{{ end }}
2 Likes