0
Welcome Guest! Login
0 items Join Now

How to add attribute loading="lazy" to the image of the menu item icon?

Last Post
Search Topic
    • Alexandr's Avatar
    • Alexandr
    • Rocketeer
    • Posts: 97
    • Thanks: 2

    How to add attribute loading="lazy" to the image of the menu item icon?

    Posted 3 years 8 months ago
    • How to add attribute loading="lazy" to the image of the menu item icon?

      A speed test from Google told me that I need to add this attribute to menu item icons when the site is loaded from a smartphone, because the menu item icons are not visible until the user clicks on the hamburger icon to display the menu on the smartphone.

      This image is hidden for guests.
      Please log in or register to see it.


      example:
      <img src="image.jpg" loading="lazy" alt="..." />
    #1429746
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to add attribute loading="lazy" to the image of the menu item icon?

    Posted 3 years 8 months ago
    • You can't. The Gantry 5 menu system does not support that. You can add attribute to the link and list tag (top of that same page as your screenshot) but you can't add other attributes to the IMG tag.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1429749
    • Alexandr's Avatar
    • Alexandr
    • Rocketeer
    • Posts: 97
    • Thanks: 2

    Re: How to add attribute loading="lazy" to the image of the menu item icon?

    Posted 3 years 8 months ago
    • MrT wrote:
      You can't. The Gantry 5 menu system does not support that. You can add attribute to the link and list tag (top of that same page as your screenshot) but you can't add other attributes to the IMG tag.

      Regards, Mark.

      that is, in this code that shows the menu item, there is no way to add attribute loading="lazy"?
      <a class="g-menu-item-container" href="/my-menu" title="My Menu">
                                                <img src="/images/icons/my-icon.png" alt="My Menu" />
                                                    <span class="g-menu-item-content">
                                    <span class="g-menu-item-title">My Menu</span>

      will there be such an opportunity in the future? because the speed test from Google tells me to do it.

      I need to add this attribute for all images on the site, even for the site logo in my template (because if a person visits the site from a smartphone, he does not see the logo, because the logo is hidden in the menu and to see the logo, he must press the menu button)
    #1429750
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to add attribute loading="lazy" to the image of the menu item icon?

    Posted 3 years 8 months ago
    • All you can do is override the Gantry 5 core menu particle (which I do not recommend because it's the most complicated particle that we have). I also do not endorse those "academic" site checkers. It's real world response that is important and even if you do this change I very much doubt that you will notice any difference whatsover as the image you are using are so tiny anyway.

      To learn how to override a particle in Gantry 5 please see our documentation here http://docs.gantry.org/gantry5/tutorials/overriding-particle-settings#overriding-particle-source-files .

      We won't be making this change to core Gantry 5.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1429751

Time to create page: 0.049 seconds