New 0.108 features for images

Cool feature in 0.108.0 is having .Ordinal available in the render-image hook, so it knows if it is called on the first image, or the sixth etc in your markdown.
So you can, for example, use browser lazy load after a few normally loaded images, prioritize the first image.
<img src="myimage.jpg" {{ if gt .Ordinal 4 }}loading="lazy"{{ end }}{{ if eq .Ordinal 0 }}fetchpriority="high"{{ end }}>

Might help with:
Optimize LCP - feature - HUGO (gohugo.io)
v0.108.0

p.s. I’m just starting with hugo so I bet everyone does something like this:
rather on failing over on a missing image,
my render hook starts

{{- $src := (.Page.Resources.GetMatch .Destination) -}}
{{- if not $src }}
<h2>missing image {{.Destination}}</h2>
{{- else }}
//responsive figure stuff goes here//
{{- end }}

Thanks very much for the 0.108 release, brilliant!

2 Likes

Browser support still wanting