The Radix theme’s image component currently outputs empty attributes on the <img> tag when these values are not provided. This results in HTML such as:
<img data-component-id="radix:image" class="page" src="/themes/custom/radix-3537368/logo.svg" alt="" title="" width="" height="" loading="auto">
This issue is to clean up the markup, ensuring attributes are only rendered when they hold valid values.
1) Implement the component:
Use the Radix image component in your Twig template without specifying attributes. For example:
{% include 'radix:image' with {
src: '/themes/contrib/radix/logo.svg',
} %}
2) Review output:
Inspect the rendered HTML in the browser via the developer tools.
3) Observe the issue:
Notice that the <img> tag includes empty alt, title, width and height attributes:
<img data-component-id="radix:image" class="page" src="/themes/custom/radix-3537368/logo.svg" alt="" title="" width="" height="" loading="auto">
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | AfterChanges.png | 56.47 KB | anirudhsingh19 |
| #4 | BeforeChanges.png | 56.16 KB | anirudhsingh19 |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
anirudhsingh19 commentedworking on it!
Comment #4
anirudhsingh19 commentedI've made the required changes in the image.twig file. I've ensured that attributes like width, height and title are only added when values are provided. The alt attribute can still be rendered empty to support decorative images as per accessibility best practices.
Marking this to Needs Review
Comment #6
doxigo commentedThanks for the MR, merged.