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 }}" />

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

endika_bikuma created an issue. See original summary.

knyshuk.vova’s picture

Issue tags: +LutskGCW20

Tagging for Drupal Global Contribution Weekend

_Hannibal_’s picture

Assigned: Unassigned » _Hannibal_
_Hannibal_’s picture

Assigned: _Hannibal_ » Unassigned

I created a text node, turned on twig debug and did not see the problem. please provide steps to reproduce.

lordgretix’s picture

Twig 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.

Diego_Mow’s picture

Hi 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.

stefan.korn’s picture

I 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.

stefan.korn’s picture

Status: Active » Needs review
FileSize
486 bytes

and from looking at templates/field/image.html.twig it seems obvious that fix from @endika_bikuma should be implemented

{#
/**
 * @file
 * Template for an image field.
 */
#}
{% include '@radix/image/image.twig' with {
  src: attributes.src,
  alt: attributes.alt,
  responsive: true,
} %}

Providing patch for this (kudos to @endika_bikuma)

Diego_Mow’s picture

Status: Needs review » Reviewed & tested by the community

Gotcha!
Now I was able to reproduce the bug, and to also validate that this patch works.

lordgretix’s picture

First, 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.

lordgretix’s picture

Status: Reviewed & tested by the community » Needs review

Sorry forgot to update the status.

idiaz.roncero’s picture

Confirmed that we had this issue too. I am in favor of letting the attributes handle alt and src, instead of hardcoding it.

jwilson3’s picture

My 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.

shadcn’s picture

Status: Needs review » Fixed

This looks good. Thanks everyone.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.