Remove or update image render hook template

[jmooring]

What you'd like to propose?

With Hugo v0.123.0 and later, page resources are no longer duplicated for each language when building a multilingual single-host site. This is a very good thing, and it works because Hugo's embedded link and image render hooks handle resolution of the markdown destinations.

This is described in detail here:
https://gohugo.io/content-management/page-resources/

As with other embedded templates, if a theme provides a link or image render hook, it overrides the embedded render hook.

So, if I use the PaperMod theme with v0.123.0 or later with a multilingual single-host site, page resources will not be duplicated to every language, resulting in 404s. That's because PaperMod's image render hook overrides the embedded image render hook.

There's three ways we can handle this:

1) Ask users to override PaperMod's image render hook

mkdir -p layouts/_default/_markup
touch layouts/_default/_markup/render-image.html

Then visit https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html and copy/paste into the file you just created.

2) Remove PaperMod's image render hook

The only thing this hook does is add loading="lazy" to every image, which arguably isn't a great idea anyway, at least for those images above the fold.

3) Update PaperMod's image render hook

Base it on Hugo's embedded image render hook. Although I don't expect the embedded link and image render hooks to change frequently, you'd need to be aware of the changes to keep your own hook in sync.

If it were me, I'd choose option 2.

[adityatelange]

The only thing this hook does is add loading="lazy" to every image, which arguably isn't a great idea anyway, at least for those images above the fold.

Not sure why you'd say that but for thumbnail/cover image for single pages loads eagerly and for the remaining images I see most of them are below the fold.
I haven't seen any post putting the image in the 1st line itself. Most of the images are after some text or intro.
p.s. The image render hook applies only to images added within markdown and not every image.

The loading is triggered when the image is in viewport, so as soon as that happens browser will load it, and it is an huge improvement in performance.

https://web.dev/articles/browser-level-image-lazy-loading

---

I'd go with updating PaperMod's render hook, but as per our previous discussion it needs uses to jump to 125 and not 123

• Image render hook vs the new embedded image render hook in 0.123 #1504 (comment)

I'd like to keep a buffer from latest hugo versions as forcing users to jump to a latest version can be annoying.

Duplicate of #1504
Fixed by #1526

[adityatelange]

closing as duplicate.