hugo notes: selective lazy loading

In which I flip normal behaviour and make lazy loading images the default and eager loading the thing you have to do unless it's the first item in a list.

The nonsense I get up to when deciding to try to make everything green on Pagespeed.

I should also point out I have no idea if I'm doing things correctly or not, this is very much a hackjob.

Here I check to see if I wrote loading= when calling the figure shortcode from index.md like so:

in index.md

{{< figure alt="describe your images better than I do" loading="eager" src="image.ext" >}}

If I did, add loading="[whatever was entered in the figure shortcode which should be "eager" otherwise it won't do the thing anyway]", otherwise load lazily.

in layouts/shortcodes/figure.html

/* [truncated] */
    <img
        /* [truncated] */
        {{ if .Get "loading" }}
            {{ with .Get "loading" | plainify }}loading="{{ . }}"{{ end }}
        {{ else }}
            loading="lazy"
        {{ end }}
        /* [truncated] */
    />
/* [truncated] */

_{I copied and modified a pre-2024 update of this drop in replacement figure code with srcset and modified it to add watermarking and the above lazy loading}

On lists such as the taxonomy pages (I use layouts/_default/list.html) or content type specific pages (the art grid uses layouts/art/list.html and the blogroll uses layouts/blog/list.html) I need the first item in the list to load normally and everything below to load lazily. This works fine on the taxonomy pages, the blogroll and small screens as the second item is usually below the fold or slightly poking above it but Pagespeed complains on larger screen/window sizes as the first 9-16 items are above the fold in the art grid.

I failed at finding an explanation about why this works, there was just a "this should work" with the {{ range ... }} line posted by people who know what they're doing in their response to people asking for help to do similar things on the hugo forums.

in list.html

/* [truncated] */
        {{ $paginate := .Paginate (.Pages) }}
        {{ range $lazy, $paginate := where $.Paginator.Pages "Params.hidden" "ne" "true" }}
            /* [truncated] */
            <a href="{{ .RelPermalink }}">
                <img 
                    /* [truncated] */
                    {{ if $lazy }}loading="lazy"{{ end }} 
                    /* [truncated] */ 
                />
            </a>
            /* [truncated] */

It does work, and I have yet to look into why. At this stage I noted that it seems to add an index number to all the items starting from 0 and is triggering on not-0.

This post also appears on my blog.

^{not actually sure how useful or interesting stuff like this would be here}

Want a cameo character? If you interact frequently with me here (either on my posts or your posts or better yet both!) or on one of the linked Discord channels, all you have to do is let me know and tell me what you'd like :) Everything you need to know is (probably) here and if it isn't just ask (sorry the link goes offsite to my blog where the layout is how I want rather than the one here which is only here because the original one was).

Thanks for looking! ^_