Настройка адаптивных стилей изображений в Drupal 8
В своей предыдущей статье я уже писал, что все картинки должны иметь стиль изображения, но иногда этого может оказаться недостаточно.
Представим, что есть баннер, который занимает всю ширину экрана. Я задаю картинке стиль изображения, где она будет отмасштабирована по ширине до 1920 пикселей. И если для компьютеров и ноутбуков — это подходящий размер, то для мобильных устройств это слишком много.
В HTML есть тег picture, который подставляет нужное изображение в зависимости от ширины экрана.
В Drupal он реализован через модуль ядра — responsive image.
Включаем модуль Responsive image:
drush en responsive_image -y
В папке с вашей темой должен находиться файл с брейкпоинтами.
/themes/custom/themename/themename.breakpoints.yml
Я использую ширины: 480, 768, 980, 1180.
Следовательно, содержимое файла выглядит вот так:
themename.sp:
label: smalltouch portrait
mediaQuery: 'all and (min-width: 1px) and (max-width: 479px)'
weight: 4
multipliers:
- 1x
themename.sl:
label: smalltouch landscape
mediaQuery: 'all and (min-width: 480px) and (max-width: 767px)'
weight: 3
multipliers:
- 1x
themename.tp:
label: tablet portrait
mediaQuery: 'all and (min-width: 768px) and (max-width: 979px)'
weight: 2
multipliers:
- 1x
themename.tl:
label: tablet landscape
mediaQuery: 'all and (min-width: 980px) and (max-width: 1179px)'
weight: 1
multipliers:
- 1x
themename.desktop:
label: desktop
mediaQuery: 'all and (min-width: 1180px)'
weight: 0
multipliers:
- 2x
Теперь для каждого брейкпоинта нужно создать стиль изображения, ширина которого должна быть равна максимальной ширине брейкпоинта.
Например: Для tablet portrait ширина в стиле изображения должна быть 979px, т.к. max-width для tablet portrait = 979px.
Буквой W я отмечаю, что стиль изображения отмасштабирован только по ширине / Width
Заходим на страницу «Адаптивные стили изображения» и добавляем новый:
/admin/config/media/responsive-image-style
В «Группа точек останова» — выбирайте свою тему.
Для каждого брейкпоинта задаем заранее созданный стиль изображения.
А в «Резервный стиль изображения» задаем для десктопа. Именно поэтому, для брейкпоинта desktop стиль изображения можно не задавать.
Desktop Retina — стиль изображения для мониторов с двойным пикселем, который часто встречается у компьютеров компании Apple.
Как только для каждой ширины все будет задано — жмем кнопку сохранить и адаптивный стиль изображения будет создан.
Переходим в управление отображением сущности, которая выводит изображение:
Для того чтобы эта настройка появилась — нажмите на иконку шестеренки
В настройках выбираем созданный нами адаптивный стиль изображения → Сохраняем.
Если изображения не обновились — воспользуйтесь командой:
drush image-flush --all ; drush cr