I realise there are multiple ways to skin a cat, but I’d like to add lazy loading on my site in the simplest way possible. All modern browsers support loading=“lazy” so I was wondering if there’s a way to add custom attributes to the KirbyText (image:…) feature?
I was thinking I could have something like (image: mypic.png loading: lazy alt: My picture) which would then render in html as <img src=“mypic.png” alt=“My picture” loading=“lazy” />
Which I think would work well for my use case as lazy loading would be automatically added, but I’m not clear on where this code should be added? Somewhere in the template I assume, but it’s not clear to me where this would live.
Thanks for the quick reply. In hindsight, I’d prefer to go with automatically adding loading="lazy" whenever an image is rendered within an article. Like I said above this code seems appropriate, but I’m not sure where to add it. I tried adding it to my template but that just ended up rendering the image twice - once where I put the php at the tope of the post and again within the post.
Well, if you use the image KirbyTag, then adding this code to your template doesn’t make sense, you need it inside what is rendered by the tag. So even if you don’t want the extra attribute for the image Kirbytag, then you have to change what this tag renders nonetheless.
However, adding lazy to all images might not be a good idea, because images above the fold should not be lazy loaded.
Then where I’ve got an image on the page I’ve added (image: some-image.webp loading: lazy) but it’s not working. Instead of an image with the lazy loading attribute, I just see a string of text saying loading="lazy"
Thanks for being so patient with me @texnixe. I work in InfoSec, I’m not a developer (does it show?!)
Anyway, I managed to get it working, but I have a feeling I’ve probably got more noise than is needed to actually make this thing work. I’ll play around to see if there’s anything I can cut out in the future. But for now, it’s working.