I setup some views using an image field with blazy and responsive image style. Some of the images are PNGs - others are SVG. As the source images (PNG) can be quite big, I use responsive image styles. Until blazy 2.6 everything worked quite good.
SVGs were wrapped as "normal" images within my views. PNGs were displayed as responsive images.
Updating blazy to any version > 2.6 breaks the SVGs now. The SVGs are tried to be loaded from image_style folder - which does not work, as the SVG are not created as image-style.

Markup of SVG for blazy 8.x-2.6

<div data-blazy="" class="blazy blazy--field blazy--field-image blazy--field-image--teaser-logo field field--name-field-image field--type-image field--label-hidden field--item blazy--on">
  <div class="media media--blazy media--bundle--image media--image is-b-loaded"><img alt="" class="media__image media__element b-lazy img-responsive b-loaded" decoding="async" loading="lazy" src="/sites/default/files/logos/logo.svg" typeof="foaf:Image"</div
</div>

Markup of SVG for blazy 8.x-2.7

<div data-blazy="" class="blazy blazy--field blazy--field-image blazy--field-image--teaser-logo field field--name-field-image field--type-image field--label-hidden field--item">
  <div class="media media--blazy media--bundle--image media--image  is-b-loaded">
    <img class="media__image media__element b-lazy b-responsive img-responsive b-loaded" decoding="async" loading="lazy" srcset="/sites/default/files/styles/teaser_logo/public/logos/logo.svg?itok=ai1aaXww 1x" src="/sites/default/files/logos/logo.svg" alt="STN" typeof="foaf:Image">
  </div>
</div>

I hoped, that setting up the field "Extensions without image styles" in Blazy UI would fix the display problem - but it doesn't!!

I found somehow related issues, but I am not sure if they really cover my problem.

CommentFileSizeAuthor
#5 3273663-svg-regression-5.patch29.16 KBgausarts

Comments

vistree created an issue. See original summary.

gausarts’s picture

gausarts commented

Thank you.

An obvious regression.

Does Blazy 2.10-beta1 still have an issue?
https://www.drupal.org/project/blazy/releases/8.x-2.10-beta1

Let me know so I can further investigate it.

gausarts’s picture

gausarts commented

Unlike the pre-optimization period (<= 2.5), the latest Blazy tried to load Image style and Responsive image style once at container level.

Unfortunately, unlike Image style, we cannot load Responsive image style once at container level given various extensions which should and should not use image style like SVG, APNG, etc. Otherwise fatal error:
> "This image style can not be used for a responsive image style mapping using the 'sizes' attribute. in responsive_image_build_source_attributes() (line 386...".

So specific to Responsive image style, we must revert to 2.5.

This is not an issue when no SVG, APNG, entered or mixed into the formatters.
That is why I didn't see this issue earlier :)

I will see if I can revert to 2.5 specific for this.
Or for quick resolution, try leaving Responsive image style empty when having SVG, alike.

vistree’s picture

vistree commented

Hi @gausartzs,
thanx for your feedback!!
8.x-2.5 and 8.x-2.6 both work. 2.7 and > 2.7 do not work. I tested 8.x-2.10-beta1 right now and this version also breaks SVG images using svg_image module ;-(
My problem with leaving responsive image styles empty is, that I have a mix of PNGs and SVG. So for now, I lock blazy to version 8.x-2.6

gausarts’s picture

gausarts commented
Status: Active » Needs review
StatusFileSize
new 3273663-svg-regression-5.patch29.16 KB

Got it, thanks.

Attached to fix the regression.
Let's see if any side issues due to changing the newly established orders.

  • gausarts committed f627aac on 8.x-2.x 
    Issue #3273663 by gausarts, vistree: Update to version > 2.6 breaks...
gausarts’s picture

gausarts commented
Status: Needs review » Fixed

When I began to like to the optimization direction which loaded (Responsive) image styles once at a container level, we had to face the merciless Responsive image which requires URI detection per item at individual level. Otherwise BOOM:
> "This image style can not be used for a responsive image style mapping using the 'sizes' attribute. in responsive_image_build_source_attributes() (line 386...".

Compare the previously organized \Drupal\blazy\Media\BlazyImage::styles() with the scattered one with this patch.

Unlike the forgiving plain old Image, Responsive Image is very temperamental, it explodes when the image is missing as much as when fed wrong URI, like SVG, etc. Some are even human errors.

We have to bear with it for now till a more elaborate effort with likely two layers of loops in the future.

Feel free to re-open if still an issue.
Thank you again for bringing this to attention :)

vistree’s picture

vistree commented

@gausarts: I installed latest DEV-version which includes your patch from #6 and can confirm that the SVGs are back now ;-)

gausarts’s picture

gausarts commented

@vistree, thanks for confirm. Makes me more confident for an RC :)

gausarts’s picture

gausarts commented
Component: Code » Regression
Parent issue: » #3257511: Optimization pre Blazy 3

For statistical purposes.

gausarts’s picture

gausarts commented
Parent issue: #3257511: Optimization pre Blazy 3 »
Related issues: +#3257511: Optimization pre Blazy 3

Side effects should be related, not a child issue.

Status: Fixed » Closed (fixed)

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