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

Адаптивные изображения в 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 первой стоит точка с наибольшим значением и далее по убыванию.

определяем контрольные точки в Drupal

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

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

объединяем контрольные точки

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

определяем стили изображений для каждой контрольной точки Drupal

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

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

формат поля picture

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

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

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

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

адаптивные изображения с атрибутом sizes

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

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

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

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

CKEditor + Picture

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

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

фильтр Drupal для замены <img> на <picture>

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

выбираем группу контрольных точек при добавлении картинки в CKEditor

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

Добавлено пользователемНадеждаon ср, 11/04/2015 - 22:56

Да, сейчас очень важно уделять внимание адаптивности изображений и темы вцелом. У меня тема неадаптивная, просто беда. 40% трафика на смартфонах, и высокий процент отказов! Хоть плачь...

Picture ещё широко не используется, да и когда ещё войдёт в общий обиход... Хотя сам по себе подход интересен. Мне вот только непонятно - зачем такие сложности? Разве не проще в css прописать адаптивность для изображений - это же несложно...

Тег Picture на данный момент нормально переваривают 55% устройств. Для всех остальных есть полифил. 

Теперь что касается простого способа. Добавив адаптивность через css мы будем отдавать одну и туже картинку и для десктопов и для мобильных что не есть хорошо. Используя picture мобилкам можно отдавать более лёгкую версию картинки. Кроме веса  есть проблема с уменьшенными большими изображениями на которых в уменьшеном варианте трудно что-то разобрать. с picture мы можем подготовить ещё один вариант изображения на котором будет отрезано всё лишнее и отдать её мобильным пользователям.

Сложно первый раз настроить зато пользоваться одно удовольствие. Залили картинку тутже отрезал лишнее и всё готово все довольны :).

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

У нас есть такая картинкаадаптировав под маленький экран используя css мы получим что наподобии этого

используя <picture> мы можем отдать мобильным пользователям например такую картинку

На ней можно понять что за человек изображён  и весит такая картинка меньше.

В Drupal нужна одна картинка. Вторая будет обрезана самим движком или автором на странице добавления контента.

Да, суть понятна... Почитал про этот тег ещё материалы... Там много возможностей - подстраивается не только под разрешение, но и под ориентацию устройства...
Видимо за этим тегом будущее, придётся со временем осваивать... Что не нравится - если сейчас я просто выкладываю одну картинку, которая при помощи css адаптируется под размеры экрана, то с picture, при условии использования всех аспектов этого тега, придётся картинок заготовить штук 10, наверное...