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">
Active
6.0
Code
I'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