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! ^_^
Not understanding any of this code is why I went back to wordpress for my personal site. Sure its slower than raw js / html / bootstrap, but dang it, its easier to update.
It's a nice site once I remembered to enable javascript XD what else did you use before going back to Wordpress? The raw js/html/bootstrap?
I tried using bootstrap once. Or maybe it was boilerplate. I did not continue.
CMSs are definitely much easier to update with. Not always so easy to update though x_x
My website (since university when I first put it online)
Raw HTML + JS > Raw HTML + JS -> Wordpress -> Boostrap -> Wordpress
Not that surprised you went back to Wordpress XD I read the other day there was some drama going on with the people running it, hope that doesn't negatively impact your ability to use plugins/update/run stuff :S
Nah, for the most part it was just drama and drama and drama. I just (mostly) use the basics.
Oh good, nice and easy then :)