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"

Rendered output on a fresh Horizon Aid install:

srcset="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='600'%20viewBox='0%200%201400%20600'%20%3E%3C/svg%3E"

Impact

The placeholder never applies, so the intended no-layout-shift behaviour of the component is lost, and each affected image emits two console warnings. Measured on a fresh install of the site template:

They also appear inside the Drupal Canvas editor, where the preview renders the same components: 68 warnings on the Home page editor mount.

Steps to reproduce

1. Install the Horizon Aid site template.
2. Open the front page and look at the browser console.
3. Or read the markup directly: 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.

Worth noting for whoever picks this up: the same string, with the same single un-encoded space, exists in vartheme_bs5 and the other Vartheme BS5 clones, and in drupal/drimage_improved 1.0.12's own two templates (templates/drimage-formatter.html.twig and modules/drimage_s3fs/templates/drimage-s3-formatter.html.twig), which is presumably where it was copied from. This issue fixes only this theme; the base theme and upstream need their own.

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_horizonaid-1.0.0-alpha4

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