Problem

If you use the preload option on a responsive image style which does use the sizes attribute in one of its breakpoints, then you get WSOD.

Here is the error message from the drupal log:

Error: Call to a member function value() on null in Drupal\blazy\BlazyFile::preload() (line 327 of DOCROOT/web/modules/contrib/blazy/src/BlazyFile.php)

Steps to reproduce

Use the preload option.
Choose a responsive image style.
Ensure in your chosen responsive image style that none of your breakpoints are using the option "select multiple image styles and use the sizes attribute".

Proposed resolution

Update line 327 to check that $item['sizes']->value() is not empty before trying to assign it.

Temporary workaround

Ensure at least one of your breakpoint uses "select multiple image styles and use the sizes attribute".

Marking this as "major" as this can break your site.

ps - Thank you very much for adding the preload option :)

CommentFileSizeAuthor
#9 3264039-preload-sizes-10.patch103.74 KBgausarts
#8 3264039-preload-sizes-8.patch95.19 KBgausarts
#7 3264039-preload-sizes-7.patch76.96 KBgausarts
#5 3264039-preload-sizes-5.patch76.65 KBgausarts
#4 3264039-preload-sizes-4.patch29.14 KBgausarts
#3 3264039-preload-sizes-3.patch1.38 KBgausarts

Comments

xamount created an issue. See original summary.

gausarts’s picture

gausarts commented

Thank you.

I'll get back to it soon.

gausarts’s picture

gausarts commented
Status: Active » Needs review
StatusFileSize
new 3264039-preload-sizes-3.patch1.38 KB

Added sizes check.

gausarts’s picture

gausarts commented
StatusFileSize
new 3264039-preload-sizes-4.patch29.14 KB

Added supports for multiple hero-images like carousels as a bonus :)

Let's see if any issues.

gausarts’s picture

gausarts commented
StatusFileSize
new 3264039-preload-sizes-5.patch76.65 KB

Fixed for some @todos partially -- added settings grouping for sanity till all settings converted into BlazySettings at 3+:
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.6/src/BlazySetting...

Merged them here for direct checks against these new preload stuffs.

Expecting misses due to fairly large changes.

Status: Needs review » Needs work

The last submitted patch, 5: 3264039-preload-sizes-5.patch, failed testing. View results

gausarts’s picture

gausarts commented
Status: Needs work » Needs review
StatusFileSize
new 3264039-preload-sizes-7.patch76.96 KB

Narrowing issues down.

gausarts’s picture

gausarts commented
StatusFileSize
new 3264039-preload-sizes-8.patch95.19 KB

Finalizing the session.

gausarts’s picture

gausarts commented
StatusFileSize
new 3264039-preload-sizes-10.patch103.74 KB

Finalized the session.

  • gausarts committed f6c0282 on 8.x-2.x 
    - Issue #3264039 by xamount, gausarts: WSOD when using preload with a...
gausarts’s picture

gausarts commented
Status: Needs review » Fixed

Other than the OP fix, a few additional fixes and bonus features were included:

  • Added supports for Slick/ Splide sliders via `Loading priority: slider`, a quasi-loading just to accommodate optional logic.
  • Fixed for wrong empty `loading` attribute override due to default to empty option.
  • Added `settings.blazies` grouping for sanity and to avoid conflict with sub-modules till all settings converted into BlazySettings at 3+ as a pre-release partial @todo fix.

OOT, just FYI, but still relevant to the included fixes:

Slick/ Splide have their own lazyload techniques: nearby, progressive, ondemand, etc.
But none supersedes Blazy lazy load technique efficiency. That is another valid reason they were designed to depend on Blazy.
Except the latest Splide in combo with Intersection Observer plugin. Or at most Slick's ondemand which tends to be problematic for some design needs given like Colorbox integration.

There is still a @todo to update them to respect Native better:
https://git.drupalcode.org/project/blazy/-/commit/f6c0282?page=2#bf64c0d...

   // @todo re-check after sub-modules which were only aware of `is_preview`.
    // Basically tricking overrides by the reversed name due to sub-modules are
    // not updated to the new options `No JavaScript` + `Loading priority`, yet.
    // As known, Splide/ Slick has their own lazy, but might break till further
    // updates. Choosing Blazy as their lazyload method is the solution to be
    // compatible with the mentioned options. Better than sacrificing Native.
    $settings['unlazy'] = empty($settings['lazy']);

As always, any misses may follow underground as guerilla fixes or bug reports.
Thanks.

xamount’s picture

xamount
Primary language English
commented

Thank you! This is has solved my problem.

Status: Fixed » Closed (fixed)

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