Is there a way to add custom attributes to an image using {{ image.html }}?

1

I know I can add a title, classes, alt.
The goal being adding the new loading attribute for eventual native lazy-loading.

You can already test it out chrome://flags/#enable-lazy-image-loading

2

This article https://hexus.net/tech/news/software/129404-google-chrome-75-support-lazy-loading-default/ makes it seem like the latest update of chrome may soon make lazy loading the default? If that isn’t truly the case, there isn’t a way that I can find/figure out to do manual HTML tags. (Although, you can manually add your HTML image code <img href="..." loading="lazy" > in the markdown/twig files.

3

Yeah that’s what I do.

4

Blockquote
Although, you can manually add your HTML image code <img href="..." loading="lazy" > in the markdown/twig files.

Oh, that is what I’ve been looking for! But how do I correctly reference the image file from within my markdown if I use inline HTML?

5

Lazy loading has been added to Grav 1.7.0-rc11. See changelog:

Added support for native loading=lazy attributes on images. Can be set in system.images.defaults or per md image with ?loading=lazy #2910

1 Like
6

Well this is great news! Thanks @anon76427325

7

Sounds exciting! :+1: