O
O
Otrivin2019-07-10 11:32:16
Drupal
Otrivin, 2019-07-10 11:32:16

Is it possible to change the attributes of an object after processing in the underlying template?

Hello!
There is a site on Drupal 8, and downgraded Twig 1.3, you need to add a class and a couple of data-attributes to the image displayed in a certain block.

Output code with debug enabled:
<a class="case-box__link-cover link-inline" href="#case_314">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--node--field-case-cover--case.html.twig
   * field--node--field-case-cover.html.twig
   * field--node--case.html.twig
   * field--field-case-cover.html.twig
   x field--image.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/salesvp/templates/field--image.html.twig' -->
  
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
  
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_style' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' -->

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/image.html.twig' -->
<img src="/sites/default/files/styles/standartnyi_720x405_/public/covers/unihim_prew_img.jpg" class="img-responsive" width="720" height="405" alt="" typeof="foaf:Image">
<!-- END OUTPUT from 'themes/bootstrap/templates/system/image.html.twig' -->

<!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' -->

<!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->

<!-- END OUTPUT from 'themes/salesvp/templates/field--image.html.twig' -->

</a>

How to do it? I tried like this:
1) I see that "field--image.html.twig" is used for output. I created a more precise one - "field--field-case-cover.html.twig", and put the modified code of the original template into it:
{% for item in items %}
  {# Попытался добавить класс и свой атрибут #}
  {{ item.attributes.addClass('responsively-lazy') }}
  {{ item.attributes.setAttribute('srcset', 'data:image/gif;base64,R0lGODdhAQABAPAAACwsLAAAACwAAAAAAQABAAACAkQBADs=') }}

  {# Ну и вывод #}
  {{ item.content }}
{% endfor %}

In response, my attributes are displayed as a string + the original image itself
Conclusion:
<a class="case-box__link-cover link-inline" href="#case_314">
      
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'field' -->
<!-- FILE NAME SUGGESTIONS:
   * field--node--field-case-cover--case.html.twig
   * field--node--field-case-cover.html.twig
   * field--node--case.html.twig
   x field--field-case-cover.html.twig
   * field--image.html.twig
   * field.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/salesvp/templates/field--field-case-cover.html.twig' -->
   class="responsively-lazy"
   class="responsively-lazy" srcset="data:image/gif;base64,R0lGODdhAQABAPAAACwsLAAAACwAAAAAAQABAAACAkQBADs="
  
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->
  
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_style' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' -->

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image' -->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/image.html.twig' -->
<img src="/sites/default/files/styles/standartnyi_720x405_/public/covers/unihim_prew_img.jpg" width="720" height="405" alt="" typeof="foaf:Image" class="img-responsive">

<!-- END OUTPUT from 'themes/bootstrap/templates/system/image.html.twig' -->

<!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' -->

<!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->

<!-- END OUTPUT from 'themes/salesvp/templates/field--field-case-cover.html.twig' -->

</a>

I see that the "rendering" of the img entity itself takes place in the "themes/bootstrap/templates/system/image.html.twig" template, along the chain from my custom template, bypassing a few more files.
Tell me, please, can I change the attributes of an entity that was prepared by underlying templates from my field template?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question