Настройка адаптивных стилей изображений в Drupal 8

В своей предыдущей статье я уже писал, что все изображения должны иметь стиль изображения, но иногда этого может быть недостаточно.

Допустим, есть баннер, который занимает всю ширину экрана. Я задаю стиль изображения, при котором картинка будет масштабироваться до ширины 1920 пикселей. И если для компьютеров и ноутбуков это подходящий размер, то для мобильных устройств это слишком много.

В HTML есть тег picture, который подставляет нужное изображение в зависимости от ширины экрана.
В Drupal это реализовано через модуль ядра — 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
Войти в полноэкранный режим Выход из полноэкранного режима

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

Например: Для планшетного портрета ширина в стиле изображения должна быть 979px, так как max-width для планшетного портрета = 979px.

Перейдите на страницу «Адаптивные стили изображения» и добавьте новый:

/admin/config/media/responsive-image-style
Войти в полноэкранный режим Выход из полноэкранного режима

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

А в «Резервном стиле изображения» мы устанавливаем стиль рабочего стола. Поэтому для точки останова стиль изображения рабочего стола не может быть установлен.

Desktop Retina — это стиль изображения для двухпиксельных мониторов, который часто встречается на компьютерах Apple.

После того как все установлено для каждой ширины — нажмите кнопку сохранить, и адаптивный стиль изображения будет создан.

Перейдите к управлению отображением сущности, которая выводит изображение:

В настройках выберите адаптивный стиль изображения, который мы создали → Сохранить.

Если изображения не обновляются — воспользуйтесь командой:

drush image-flush --all ; drush cr
Войти в полноэкранный режим Выйти из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий