Стоит задача стилизации поля Изображения в Drupal 8. Например нужно сделать LazyLoad для поля Изображение с стилем thumbnail и с popup в полном размере.

Нужно помнить что работать будем с полем у которого цепляется шаблон field.html.twig, найти его можно по пути /core/modules/system/templates/field.html.twig.

Перенесем системный field.html.twig в папку с темой в папку /themes/моятема/templates/field/

1. Узнаем Машинное имя нашего поля Изображение, у меня это field_simpleimage

2. Переименовываем наш шаблон для поля который мы закинули в папку с нашей темой

field.html.twig -> file--field_simpleimage.html.twig

3. Вносим необходимые правки в файл, например так:

{% if label_hidden %}
  {% if multiple %}
      {% for item in items %}
          {{ item.content }}
      {% endfor %}
  {% else %}
    {% for item in items %}{# Выводим одно изображение #}
        <a href="{{ file_url(item.content['#item'].entity.uri.value) }}"><img data-src="{{ item.content['#item'].entity.uri.value | image_style('1200x800') }}" class="lazy" alt="{{ drupal_title() }}"></a>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}{# Выводим несколько изображений и оборачиваем каждое изображение в div #}
      <div class="simple_image__item">
    {% endif %}
    {% for item in items %}
        <a href="{{ file_url(item.content['#item'].entity.uri.value) }}"><img data-src="{{ item.content['#item'].entity.uri.value | image_style('1200x800') }}" class="lazy" alt="{{ drupal_title() }}"></a>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
{% endif %}

где:

{{ file_url(item.content['#item'].entity.uri.value) }} - выводит оргигнальное изображение

{{ item.content['#item'].entity.uri.value | image_style('1200x800') }} - выводит изображение с примемением стиля (используется машинное имя стиля)

{{ drupal_title() }} - выводит название поста, используется через twig tweak

4. Чистим кеш.

Готово.

Аватар пользователя antidenantiden
11 августа 20172,038