New lazy loading in Grav 1.7

Support
1

Hi !

I’m using Grav v1.7.3 - Admin v1.10.2 and in the system config for media there’s a new option allowing us to choose a native loading type (auto, lazy, eager). That’s a really great enhancement!
Unfortunately I cannot make it work. More precisely, it works when I use the markdown syntax (adding “?loading=lazy” as an attribute in the md editor) but not when I use the twig “image.html()” function in a template. Am I missing something? Is there something else to do than choosing the “lazy” option in the system config?

Thanks in advance

2

@jordan, Haven’d found any documentation on it, but according the code you should be able to do the following in Twig:

{# 
  Gets default from 'system.images.defaults.loading'
  Unfortunately not working currently due to [issue](https://github.com/getgrav/grav/issues/3192)
#}
{{ (page.media|first).loading.html() | raw }}

{# Workaround for above issue #}
{{ (page.media|first).loading(config.system.images.defaults.loading).html() | raw }}

{# Provide loading method #}
{{ (page.media|first).loading('lazy').html() | raw }}
1 Like
3

@pamtbaau , thanks for that quick and perfect answer: this solves the problem!

4

Bug has been fixed in repo and will be available in 1.7.4

5

In upgrade doc it’s written:
Markdown: Added support for native loading=lazy attributes on images. Can be set in system.images.defaults or per md image with ?loading=lazy

I’ve set lazy option in Configuration -> Media -> Image loading behavior in admin area. But attributes was not applied to img tags. I had to change my md to this:
{{ image.cropResize(806,582).loading.html }}
So, does this Can be set in system.images.defaults mean, that this option doesn’t work and loading should be set manually?
Or there is another use case scenario where it works without any chages in md code?

6

@01K, You are right, the default configuration setting for loading is not applied to images defined in Markdown.

There are two issues with loading in Markdown:

  • The default value is not being read properly.
  • If the above issue has been fixed, the default value always overrides the explicitly set value of loading in Markdown

I’ve create a pull request to fix the issue.

1 Like
7

Thank you for making a pull request!
So, once the fix will be applied the system.images.defaults with lazy on will work out of the box?

8

@01K, Not quite…

  • For Markdown yes.
    With config set to system.images.defaults.loading: lazy, the following will happen:

    // Markdown

![](image.jpg)
![](image.jpg?loading=eager)

    Will generate:

    // HTML

<img loading="lazy" alt="" src="...">
<img loading="eager" alt="" src="...">

  • For Twig, the loading function must still be applied explicitly like {{page.media['myimage.jpg'].loading().html() | raw}}.
    Without parameters, the default will be picked up.

1 Like
9

Thank you for the clarifications!
I won’t imagine what would be with the forum and CMS in general without your activity :wink:

10

Image ‘loading’ attribute has been fixed and will be available in Grav 1.7.8

11

we waiting for it… but now Grav 1.7.38