Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
The template at src/components/image/image.twig
is duplicating the images src attribute.
Output example:
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
* field--node--field-image--article.html.twig
* field--node--field-image.html.twig
* field--node--article.html.twig
* field--field-image.html.twig
* field--image.html.twig
x field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/contrib/radix/templates/field/field.html.twig' -->
<div data-quickedit-field-id="node/1/field_image/es/full" class="article__field-image">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_style' -->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/field/image-style.html.twig' -->
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/contrib/radix/templates/field/image.html.twig' -->
<img property="schema:image" src="/sites/default/files/styles/large/public/2019-10/gonbidapena-600x600.jpg?itok=U4Ap3OcW" width="480" height="480" title="TEST - gonbidapena" typeof="foaf:Image" class="img-fluid" src="/sites/default/files/styles/large/public/2019-10/gonbidapena-600x600.jpg?itok=U4Ap3OcW" alt="TEST - gonbidapena" />
<!-- END OUTPUT from 'themes/contrib/radix/templates/field/image.html.twig' -->
<!-- END OUTPUT from 'core/themes/stable/templates/field/image-style.html.twig' -->
<!-- END OUTPUT from 'core/themes/stable/templates/field/image-formatter.html.twig' -->
</div>
<!-- END OUTPUT from 'themes/contrib/radix/templates/field/field.html.twig' -->
The variable attributes already contains src attribute.
The template src/components/image/image.twig
:
{#
/**
* @file
* Template for an Image component.
*
* Available config:
* - utility_classes: An array of utility classes.
* - align: left|right|center
* - responsive: true|false
*/
#}
{% set classes = [
responsive ? 'img-fluid' : 'img-thumbnail',
align == 'left' ? 'float-left',
align == 'right' ? 'float-right',
align == 'center' ? 'mx-auto d-block',
]|merge(utility_classes ? utility_classes : []) %}
<img{{ attributes|without('alt').addClass(classes) }} src="{{ src }}" alt="{{ alt }}" />
Suggested fix:
Remove src="{{ src }}"
from <img>
<img{{ attributes|without('alt').addClass(classes) }} alt="{{ alt }}" />
OR
add src
to without('alt', 'src')
<img{{ attributes|without('alt', 'src').addClass(classes) }} src="{{ src }}" alt="{{ alt }}" />
Comment | File | Size | Author |
---|---|---|---|
#10 | duplicated__src__attribute_on_images-3105336-009.patch | 762 bytes | lordgretix |
#8 | duplicated__src__attribute_on_images-3105336-008.patch | 486 bytes | stefan.korn |
Comments
Comment #2
knyshuk.vova CreditAttribution: knyshuk.vova at Internetdevels commentedTagging for Drupal Global Contribution Weekend
Comment #3
_Hannibal_ CreditAttribution: _Hannibal_ commentedComment #4
_Hannibal_ CreditAttribution: _Hannibal_ as a volunteer and at RockSolid PSF, Drupal Ukraine Community commentedI created a text node, turned on twig debug and did not see the problem. please provide steps to reproduce.
Comment #5
lordgretix CreditAttribution: lordgretix commentedTwig debug is irrelevant. I have this issue with debug on/off and it still there.
Also, have you inspect the code with browser dev tools? In which case you wont be able to see it since the browser corrects it. For seeing it you must inspect the source-code (Crtl+U).
Dont misunderstand me, its not a bug that causes crashes or prevents it from correct display. Its just an html error which mainly affects SEO.
Comment #6
Diego_Mow CreditAttribution: Diego_Mow as a volunteer and at CI&T commentedHi Endika.
Tried to reproduce this with:
* Radix Theme
* Custom Theme derivated from Radix
* Media Element rendering image
None of them duplicated the src tag.
Can you please provide if you are using a custom theme and/or adding any module to process images?
I strongly believe that it should not be corrected on Radix side.
Comment #7
stefan.kornI can confirm the bug @endika_bikuma is reporting.
Using a radix subtheme and using responsive image formatter.
I suppose the hint from @endika_bikuma to not use browser dev tools, but browser html source instead is really important to verify this.
Comment #8
stefan.kornand from looking at templates/field/image.html.twig it seems obvious that fix from @endika_bikuma should be implemented
Providing patch for this (kudos to @endika_bikuma)
Comment #9
Diego_Mow CreditAttribution: Diego_Mow as a volunteer and at CI&T commentedGotcha!
Now I was able to reproduce the bug, and to also validate that this patch works.
Comment #10
lordgretix CreditAttribution: lordgretix commentedFirst, thank you @stefan.korn for helping me to explain myself and for the patch.
Now, why should we take from attributes "src" and "alt" at templates/field/image.html.twig for then removing them from the attributes at src/components/image/image.twig and print them by hand. Why not just let the attributes handle them?
Providing a patch.
Comment #11
lordgretix CreditAttribution: lordgretix commentedSorry forgot to update the status.
Comment #12
idiaz.ronceroConfirmed that we had this issue too. I am in favor of letting the attributes handle alt and src, instead of hardcoding it.
Comment #13
jwilson3My guess is that the attributes are pulled out and rendered separately so that one could call the component templates with or without depending on Drupal Attributes object. If this were an
image.html.twig
template, I'd be for letting Attributes handle the render, but since there is some semblance of portability with the components module, this might make less sense.Comment #15
shadcn CreditAttribution: shadcn at Chapter Three commentedThis looks good. Thanks everyone.