Targeting the first image in content with image render hook

[tut]

I want to use the native loading="lazy" in browsers, but to avoid Cumulative layout Shift issues, I want to remove the class in every first image within the content. I am using this image render hook. Is that possible?

[bep]

@tut

Is that possible?

If you use Hugo >= 0.108.0 you can use the new, drum roll, .Ordinal attribute in the hook template:

{{ if .Ordinal }} loading="lazy"{{ end}}

Ordinal is zero based, so the above will happen for all but the first image.

[tut]

Amazing! It worked.