Problem/Motivation

Gallery paragraphs doesn't use lazy loading at all (no blazy, nor native lazy loading)

Firefox console showing drowl base gallery element markup

Steps to reproduce

Proposed resolution

Maybe its a D9 core issue? https://www.drupal.org/project/drupal/issues/3192234

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
2023-02-27 10_34_04-Test Native Lazy loading (drowl_base) _ Drupal 9 CMS webks – Firefox Developer E.png70.69 KBthomas.frobieter

Issue fork drowl_paragraphs-3344645

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

thomas.frobieter created an issue. See original summary.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented
Issue summary: View changes
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented
Assigned: Unassigned » anybody

@anybody: Probably install the patch for D9? https://www.drupal.org/project/drupal/issues/3192234#comment-14852035

Edit: Tried the patches, they only add width + height attributes to responsive images.. what is also a good thing. Still no lazy attribute.

Edit 2: https://www.drupal.org/project/drupal/issues/3192234#comment-14791119 So this patch will never be implemented in D9 .. so we might better skip this since D10? :/

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Assigned: anybody » Unassigned
Status: Active » Postponed

Yep, we'll wait for the Drupal 10 #3192234: Apply width and height attributes to allow responsive image tag use loading="lazy" fix and see if it's solved with that.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Postponed » Active

We just ran into this issue on our Drupal 10 projects. Reopening!

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Related issues: +#3067459: Add width and height attributes in drupalImage
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Parent issue: » #3356042: drupal_image() needs #width / #height values for fully working image cache scale, lazy-loading and img attributes

First needs to be fixed upstream in: #3356042: drupal_image() needs #width / #height values for fully working image cache scale, lazy-loading and img attributes

Anybody opened merge request !56

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Title: All image paragraphs should use native lazy loading » 3344645-all-image-paragraphs-width-height-lazy
Assigned: Unassigned » thomas.frobieter
Status: Active » Needs review

Okay. Lazy loading is added. Still we found out drupal_image() in twig_tweak has some flaws. For example:

  • #alt
  • #title

are not provided as parameters and set as attribute values instead of using the theme_image properties. Furthermore

  • #width
  • #height

are not provided, which leads to missing width / height calculation by image styles in core!

But that's not part of this issue, we should monitor the twig_tweak issues I'll create separately.

Ready for review!

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented
Status: Needs review » Fixed
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Title: 3344645-all-image-paragraphs-width-height-lazy » All image paragraphs should use native lazy loading

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

Follow-up for twig_tweak: #3356042: drupal_image() needs #width / #height values for fully working image cache scale, lazy-loading and img attributes