Здравствуйте!
Есть сайт на Drupal 8, и даунгрейднутым Twig 1.3, нужно к выводимому в определенном блоке изображению добавить класс и пару data-атрибутов.
Код вывода с включенным дебагом:<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>
Как это сделать? Я пытался следующим образом:
1) Вижу, что для вывода используется "field--image.html.twig". Создал более точный - "field--field-case-cover.html.twig", и в него поместил модифицированный код изначального шаблона:
{% for item in items %}
{# Попытался добавить класс и свой атрибут #}
{{ item.attributes.addClass('responsively-lazy') }}
{{ item.attributes.setAttribute('srcset', 'data:image/gif;base64,R0lGODdhAQABAPAAACwsLAAAACwAAAAAAQABAAACAkQBADs=') }}
{# Ну и вывод #}
{{ item.content }}
{% endfor %}
В ответ выводятся мои атрибуты в виде строки + сама изначальная картинка
Вывод:<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>
Вижу, что сам "рендеринг" сущности img происходит в шаблоне "themes/bootstrap/templates/system/image.html.twig", по цепочке от моего кастомного шаблона минуя еще несколько файлов.
Подскажите, пожалуйста, могу ли я из своего шаблона поля изменить атрибуты сущности, которая была подготовлена низлежащими шаблонами?