Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

New lazy loading in Grav 1.7

Solved by pamtbaau View solution

Started by jordan 5 years ago · 10 replies · 1432 views
5 years ago

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

5 years ago Solution

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

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
5 years ago

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

5 years ago

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

5 years ago

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?

5 years ago

@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
last edited 03/01/21 by pamtbaau
5 years ago

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?

5 years ago

@01K, Not quite...

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

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

    Will generate:

    HTML
    // 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
5 years ago

Thank you for the clarifications!
I won't imagine what would be with the forum and CMS in general without your activity ;)

5 years ago

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

3 years ago

we waiting for it... but now Grav 1.7.38

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 53 10 hours ago
Support · by Anna, 3 days ago
2 60 13 hours ago
Support · by Justin Young, 14 hours ago
1 30 14 hours ago
Support · by Duc , 1 week ago
2 65 5 days ago
Support · by Colin Hume, 1 week ago
2 56 5 days ago