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

Оригинал https://www.thirdandgrove.com/responsive-image-configuration-drupal-8

На сайтах с отзывчивым дизайном важным является оптимизация размеров картинок под различные размеры экрана. В то время, как изображение "тянется" CSS правилом max-width: 100%; эта фича подходит визуально под дизайн, но это не предотвращает загрузку больших по разрешению а равно и объему картинок на маленьких экранах, что особенно негативно сказывается на медленных соединениях типа 3G. Однако в Drupal 8 эта проблема легко решается, позволяя путем соответствующих настроек загружать изображения подходящих размеров в зависимости от экрана устройства.

Во первых необходимо включить модули Breakpoint и Responsive Image, поставляемые в ядре Drupal 8. Определите точку или точки "брекпоинт", соответствующих граничным разрешениям, при которых будет происходить смена размеров изображений. Для примера мы рассмотрим точку в 600 пикселов.

Следующим шагом необходимо "зарегистрировать" настройки брекпоинта в соответствующем файле модуля или темы. Файл должен иметь название your_theme_name.breakpoints.yml (или your_module_name.breakpoints.yml), где соответствующий префикс перед точкой заменяется своим названием модуля или темы. Так же в конфиге меняются соответствующие префиксы. В некоторых темах шаблонов, например в Omega, соответствующий файл со своими настройками уже создан, где можно посмотреть или поправить уже имеющиеся параметры или добавить свои. В данном примере настройки брекпоинта группируются в группе Banner Image:

your_theme_name.bannerImage.narrow:
  label: narrow
  mediaQuery: ''
  weight: 0
  group: Banner Image
your_theme_name.bannerImage.wide:
  label: wide
  mediaQuery: '(min-width: 600px)'
  weight: 1
  group: Banner Image

Далее создаем наши имедж-стайлы для каждого из брекпоинтов по адресу: /admin/config/media/image-styles, назовем их "Banner Image Small" для разрешений меньше 600px с параметрами Scale 600x150 и второй "Banner Image Large" с Scale 1200х300. После чего переходим на страницу /admin/config/media/responsive-image-style и добавляем новый Респонсив имедж стайл в соответствии со скриншотом:

Сохраняем.

Теперь применяем настройку "Responsive image" в форматтере соответствующего поля:

Тестируем, до брекпоинта 600px загружается изображение, обработанное имедж-стайлом Small, после брекпоинта Large.

Profit

Share this post

Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.