Add support for CSS's image-set() syntax

[proimage]

Craft already supports <img srcset=""> via {{ assetField.getSrcset([...]) }}.

Can we please also have support for the CSS background-image: image-set(...); syntax? I think the main difference is where the quotation marks are placed.

Reference: https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/

[brandonkelly]

Proper image-set support is still basically nonexistent without using a -webkit- prefix, so the only way we could do this right now that would be of any help would be to add a getBgCss() method, which returns multiple background-image style definitions, per the example in that CSS Tricks article. That feels a little too gross to me to be part of the core API, though. Maybe better suited for a plugin, implemented via a behavior.

That said, I’ve just added a new getUrlsBySize() method (d6930cc), which handles all the grunt work that used to live within getSrcset(). It returns an array of image transform URLs, indexed by size. You can use that along with your own bgCss() macro:

{% macro bgCss(urls) %}
  /* Fallback */
  background-image: url('{{ urls|first }}');

  /* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */
  background-image: -webkit-image-set({{ urls|map((url, size) => "url('#{url}') #{size}")|join(', ') }});

  /* Standard use */
  background-image: image-set({{ urls|map((url, size) => "'#{url}' #{size}")|join(', ') }});
{% endmacro %}

{% set asset = ... %}
{% set urls = asset.getUrlsBySize(['1x', '2x'], {width: 500}) %}

<div style="{{ _self.bgCss(urls) }}">
  ...
</div>

[brandonkelly]

Craft 3.7.16 is out with that new method.

[proimage]

Wow, works for me!

Does getUrlsBySize() 1st parameter also accept the 640w / 1024w style of values? I find those far more useful than 1x / 2x for some reason.

[brandonkelly]

Yep – exactly the same param support as getSrcset().