Encode the space in the dynamic responsive image placeholder, so the srcset candidate is not dropped

Problem/Motivation

The dynamic-responsive-image component builds a low-quality image placeholder as an inline SVG data URI and puts it in srcset. Every space in that SVG is percent-encoded as %20 except one: the space between %3Csvg and xmlns is literal.

components/molecules/dynamic-responsive-image/dynamic-responsive-image.twig, line 39:

{% set dummy_image = "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='" ~ width ~ "'%20height='" ~ height ~ "'%20viewBox='0%200%20" ~ width ~ '%20' ~ height ~ "'%20%3E%3C/svg%3E" %}

In a srcset, whitespace separates the URL from its descriptor. The browser therefore reads the URL as data:image/svg+xml;charset=utf8,%3Csvg, treats xmlns='http://www.w3.org/2000/svg'%20width='1400'… as a descriptor, cannot parse it, and drops the whole candidate:

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "data:image/svg+xml;charset=utf8,%3Csvg"

So the placeholder never applies, the component's no-layout-shift behaviour is lost, and every affected image logs two console warnings.

Measured

Confirmed on a fresh install of a site template built on this theme. On the front page: 18 affected images, 36 console warnings. After encoding the space: 0 broken candidates, 0 console messages.

Affected branches

Present in 5.0.x, 4.1.x and 4.0.x. This issue targets 5.0.x; backports are a maintainer decision.

Note for the starter-kit clones

Every Vartheme BS5 clone carries its own copy of this component, so fixing the base theme does not fix them. Already fixed in vartheme_bs5_horizonaid (#3620662); the other clones need the same one-character change.

Steps to reproduce

1. Install a site built on this theme with images rendered through the component.
2. Open the front page and look at the browser console.
3. Or read the markup: curl -s <site>/ | grep -o 'srcset="[^"]*data:image/svg[^"]*"'

Proposed resolution

Encode that one space as %20, matching every other space in the same string.

Note that the quoted url('data:image/svg+xml,…') values elsewhere in the theme's CSS are not affected: inside a quoted CSS url() the whole string is the URL and a literal space is legal. Only srcset, where whitespace is a delimiter, breaks.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ➖ UX/UI designer responsibilities
• ✅ Accessibility and Readability
• ✅ Reviewed by a human
• ✅ Code review by maintainers
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes
• ✅ Release vartheme_bs5-5.0.2

User interface changes

• The low-quality placeholder starts applying, so images reserve their space before the real file arrives instead of shifting the layout.

API changes

• N/A

Data model changes

• None.

Release notes snippet

• Fixed the dynamic responsive image placeholder, whose un-encoded space made browsers drop the srcset candidate, so the low-quality placeholder never applied and every image logged two console warnings.

AI-Generated: Yes