Как в Drupal сделать адаптивные изображения

Адаптивные картинки для Drupal мы получим заменив старый добрый <img> на новый, пока ещё поддерживаемый не всеми браузерами, <picture>. Благодаря этому элементу мы можем загрузить несколько вариантов одной картинки, а браузер скачает ту которая больше подходит. Подробнее о <picture> можно почитать в статье про адаптивные изображения. Выполнив все инструкции из этой статьи вы получите адаптивные изображения на своём сайте, при этом процесс добавления изображений ни как не изменится. Drupal не только заменит <img> на <picture> но и сам создаст несколько вариантов картинки с разными размерами.

1. Подготовительный этап
2. Вставляем картинку как поле
3. Вставляем картинку через редактор

Переходим от слов к делу, а точнее к установке пары модулей. Нам понадобятся модуль Picture. Название говорит само за себя. Модуль получился в результате бэкпорта модуля Responsive Image разработанного для восьмёрки. Кроме этого ещё возьмём Breakpoints и Ctools (если у вас не только что установленный сайт, то CTools скорее всего уже стоит).

Код для элемента picture выглядит так

<picture>
  <source media="(min-width: 1024px)" srcset="large_image.jpg">
  <source media="(min-width: 600px)" srcset="medium_image.jpg">
  <img src="image.jpg">
</picture>

Определяются контрольные точки указывается соответствующее изображение и последним идёт fallback. Будем делать в том же порядке. Начнём с определения контрольных точек.

Подготовительный этап. Создаём контрольные точки, стили и группы.

Переходим в меню Конфигурация → Мультимедиа → Breakpoints. Указываем название контрольной точки и соответствующий ей медиа запрос. Если нужна поддержка ретина отмечаем в  Multipliers нужное значение. Обратите внимание на порядок в котором расположены точки. В моём примере с min-width первой стоит точка с наибольшим значением и далее по убыванию.

Дело в том что браузер будет просматривать условия по очереди и найдя первое подходящее не будет смотреть остальные. Таким образом если поменять местами точки desktop и tablet то всегда будет отображаться маленькая картинка.

Теперь объединим созданные контрольные точки в группу. Жмём на Add a new group, вписываем название группы и отмечаем созданные контрольные точки.

С контрольными точками определились, переходим к изображениям. Для каждой контрольной точки создаём стиль. Для тех кто не в курсе что и как вот статья про картинки поля и стили. После создания стилей приступаем к настройке модуля Picture. Переходим в меню Конфигурация → Мультимедиа → Picture mappings → Добавить. Затем указываем группу точек и выбираем стили изображений для каждой контрольной точки.

Тег <picture> для изображений вставляемых как поле.

Далее рассматривается случай когда изображения вставляются как поле. Переходим в меню Структура → Типы материалов → Статья → Управление отображением. Если у вас интерфейс Drupal переведён на русский то возможна ситуация когда в выпадающем списке будет два пункта "изображение". Выберите тот в настройках которого есть Picture mapping.

В настройках поля выбираем группу точек и fallback.

Обновляем и сохраняем настройки. После всех этих настроек вместо стандартного тега <img> будет выводиться <picture> с атрибутами source где будет прописан медиа-запрос и соответствующая ему картинка.

Тег <pcture> представляет несколько вариантов для адаптации изображения. Среди них есть и такой - определяем размер для картинки через атрибут sizes и предлагаем браузеру несколько вариантов картинки с указанием размеров. Рассчитав размер браузер сам выберёт один из предложенных вариантов картинки. Настройки для такого варианта будут отличаться только последним пунктом. В отображении полей вместо формата Изображение выбираем Image with sizes. В настройках указываем значение атрибута sizes и стили изображений.

Значение sizes указываться в vw(процент от ширины вьюпорта) и возможны медиазапросы.

Тег <picture> для изображений в тексте.

На практике чаще нужно вставлять изображения в текст, а не отдельным полем. Я для этого пользуюсь модулем Insert. На данный момент Insert не дружит с Picture. Надеюсь в следующих версиях разработчики это исправят, а пока можно воспользоваться патчем https://www.drupal.org/node/1954546.

Теперь для тех кто вставляет картинки через редактор. Также создаём точки и группируем их, делаем всё что описано в пункте - подготовительный этап. После этого в настройках picture mapping появится блок с настройками в котором подключается группа точек для редактора, в моём случае для CKEditor.

Отмечаем чекбокс выбираем fallback и сохраняем. Такие блоки настроек будут создаваться для каждой группы контрольных точек, таким образом мы можем выбирать какие группы подключать в редакторе а какие нет.

Последний шаг - включить фильтр.

На странице настройки текстового формата включаем фильтр заменяющий тег <img>. Это фильтр должен стоять последним в порядке фильтров. Теперь при добавлении изображений через редактор, в выпадающем списке Image size (required) появится пункт обозначающий группу контрольных точек.

На этом тема адаптивных изображений в Drupal не закончена. На очереди статьи о том как сделать адаптивное слайдшоу, как лучше и проще адаптировать картинку используя возможности Drupal и ... может у вас есть какие вопросы? Пишите попробуем вместе разобраться.