I want to have lazy loading on images on my hugo site but for some reason the images are not loading.
I have in my layouts/_default/_markup/render-image.html the following code:
<img
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
loading="lazy"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
/>
Repo is here: GitHub - TeldridgeLDN/servicexdesignv2
What am I doing wrong?
Lazyloading is not connected to your issue. Right now layouts/_default/_markup/render-image.html is empty, so nothing is done probably. If that code is the only code in that file, then the $img is not set and won’t bring height and width. If there is other code around that part involved that might be the issue.
As your images are saved in content directory (on my website got exactly that same) and you referring to it like /img/ in your .Destination than you need to make sure you got in your hugo config file something like that
assetDir = "content"
ps. hugo on run shall return you information that is struggling to find images when you don’t specify where they are, as he will look them in assets folder by default.
That’s the only code in that file. So in order to specify $img I would add something like this to the render-image.html file ?
< img
alt=“A lazy image”
class=“lazy”
data-src=“lazy.jpg”
data-srcset=“lazy_400.jpg 400w,
lazy_800.jpg 800w”
data-sizes=“100w”
/>
It’s not that easy as you imagine it. For a start I would do the following in the renderhook:
<img alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} class="lazy" data-src="{{ .Destination | safeURL }}" data-srcset="" data-sizes="" />
with data-srcset and data-sizes with the values you need. I am not sure if you are working with https://github.com/aFarkas/lazysizes or any other script, but you obviously leave out a lot of what is required to make this work.
I hope you are aware that this render hook will take over ALL markdown images ().
Have a look at shortcodes, this might be more what you want.
And have a look at how to request help: