Hi,

I am using Blazy along with Slick and was running into responsive sizing issues due to the square 1x1px placeholder image being implemented by Blazy.

Within Blazy.php I changed:

$image['#uri'] = static::PLACEHOLDER;

to

$image['#uri'] = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\' viewBox%3D\'0 0 ' . $image_attributes['width'] . ' ' . $image_attributes['height'] . '\'%2F%3E';

And I can now correctly scale the placeholder images before they have been replaced by the actual image.

See https://codepen.io/shshaw/post/responsive-placeholder-image for more info on the concept.

CommentFileSizeAuthor
#4 blazy-svg-placeholder-2838131-4.patch2.65 KBkevineinarsson

Comments

JaceRider created an issue. See original summary.

gausarts’s picture

gausarts commented
Status: Active » Postponed (maintainer needs more info)

Interesting finding. Thank you.

I haven't been able to test it, yet, sorry.
But I have a few questions for just in case you have already been there:

  1. Without dataURI SVG, with original placeholder, does Aspect ratio, probably fluid one, solve your original issue?
  2. With dataURI SVG, do all Aspect ratio options still stand correctly?
  3. With dataURI SVG, does it solve issue with Responsive image Aspect ratio, (try enforced option with various dimensions to make Aspect ratio option respected by Responsive image)?

If #3 works correctly, SVG will be a great replacement for both regular and Responsive images.

dataURI is supported way back to IE8:
http://caniuse.com/#feat=datauri

I haven't found a definitive info whether dataURI SVG is also supported by IE8.
If you see "Usage relative" tab at http://caniuse.com/#feat=svg, IE8 doesn't support SVG. Not sure about dataURI SVG. Probably we can ignore IE8 these days, but D8 supports IE8 by default, we may still have to put this into consideration.

Thoughts?

gausarts’s picture

gausarts commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)

If I have time, I will do it. But for now let's close old issues which I cannot immediately fulfill.

If anyone is interested to make this happen, feel free to re-open. Thank you.

kevineinarsson’s picture

kevineinarsson commented
Version: 8.x-1.x-dev » 8.x-2.x-dev
Status: Closed (works as designed) » Needs review
StatusFileSize
new blazy-svg-placeholder-2838131-4.patch2.65 KB

What is the status on the comments from #2 @gausarts? Do the posed questions still apply to 2.x and need to be tested? Since D8 only supports the latest version of IE since 8.8.0 we don't need to think too much about browser support. Support table here: https://caniuse.com/#feat=svg-img

Here's my take at a patch for 2.x, having a placeholder in responsive image formatter seems a bit difficult to solve if it's using an srcset with different image formatters, since they can change the aspect ratio.

gausarts’s picture

gausarts commented

Yes, please verify my questions. Thanks!

We are stabilizing things for an initial full release. Any change must be carefully reviewed to avoid any potential side issue, at least against my previous questions.

Regarding IE8, you are right. Please ignore. That was 3 years ago. Things changed since then.

gausarts’s picture

gausarts commented
Title: Use SVG as placeholder image. » Use SVG as placeholder image
Status: Needs review » Fixed

Committed for wider feedback. Thank you for contribution!

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

awesome. This is probably the right solution to get #3097685: Support aspect ratio for Responsive image working too I assume, right?

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

Oh wait. Nevermind. Its more complex for responsive images, which could have art direction — ie, different image dimensions for different resolutions/breakpoints — so a single SVG with a fixed width and height depicting one single aspect ratio won't work in all cases of responsive images inside a <picture> element where an aspect ratio might change.

Status: Fixed » Closed (fixed)

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