Коли «менше» означає «більше»? Коли картинки на вашому сайті зменшуються згідно з екранами мобільних пристроїв — а задоволення користувачів, охоплення аудиторії, швидкість сайту, а також ваші прибутки впевнено зростають. Чудова формула, правда? Ця магічна здатність картинок підлаштовуватись під розмір екрану яскраво ілюструє те, як працює респонсивний дизайн. А особливо прекрасно він працює в новій версії Друпала — Drupal 8, який містить вбудовану підтримку респонсивних зображень. Саме про це сьогодні і поговоримо.
Респонсивні зображення: бездоганні в Drupal 8
Що означає вбудована підтримка респонсивних зображень в Drupal 8? Використовуючи Drupal «з коробки», ви побачите, що вбудовані теми є повністю респонсивними і виглядають ідеально на всіх пристроях. Будь-яка інша тема може бути налаштована так само, оскільки Drupal 8 пропонує сучасні та зручні вбудовані інструменти для налаштування респонсивних зображень. Давайте поглянемо на них.
Інструменти Drupal 8 для налаштування респонсивних зображень
Ці інструменти включають в себе модулі Breakpoint і Responsive image, що стали частиною ядра Drupal 8. Модуль Breakpoint навіть увімкнений за замовчуванням. А модуль Responsive image (раніше відомий як модуль Picture) потрібно увімкнути.
Вони дозволяють виводити респонсивні зображення на різних пристроях залежно від ширини екрану. Доступна не тільки зміна розміру картинок, але і їх елегантне кадрування. Забудьте про важкі банери в 2000 пікселів на мобільному екрані — це все в минулому!
Респонсивні зображення правильного розміру будуть відображатися згідно з брейкпойнтами, які ви встановите. Встановити брейкпойнти означає визначити такі величини ширини екрану, при яких розмір зображення повинен змінюватись (наприклад, min-width: 600px). Давайте коротенько розглянемо весь процес.
Процес налаштування респонсивних зображень в Drupal 8
- Визначення брейкпойнтів. Ви можете визначити брейкпойнти в YAML-файлі (yourtheme.breakpoints.yml) в папці вашої теми, а також організувати брейкпойнти в групи.
- Створення стилів зображень для брейкпойнтів. Для кожного брейкпойнта потрібно створити стиль зображення: Configuration — Media — Image Styles. Використовуйте ефект “crop and scale”.
- Створення респонсивного стилю зображень. В розділі Configuration — Media — Responsive Image Styles є кнопка "Add responsive image style", яка допоможе вам зібрати разом усі стилі у єдиний респонсивний стиль.
- Прив’язка стилю до поля. Перейдіть до Manage Display — Format — Responsive image вашого “image field” та оберіть ваш респонсивний стиль зображень. Готово!
Retina: коли «більше» означає «більше»!
В деяких випадках здатність зображень збільшуватись не менш важлива, ніж здатність зменшуватись. Гарний приклад — дисплеї HD/Retina з дуже високою роздільною здатністю. Чудовою ідеєю буде встановити вдвічі більші картинки, використовуючи множник “2x” у брейкпойнтах. Ну і, звісно, якість оригінальних зображень повинна бути бездоганною.
Висновок
Респонсивність — один із найбільших плюсів Drupal 8. А загалом їх так багато, що навіть наші два огляди (1 і 2) не змогли вмістити в себе всі покращення. Більше цікавих розповідей, новинок та прикладів чекають на вас у нашій розсилці та на сторінках соціальних мереж.
А якщо вам потрібна допомога з налаштуванням респонсивних зображень в Drupal 8, або якщо ви хотіли би перейти на найновішу версію Друпала, зв’яжіться з нашими розробниками. Все буде “responsive”!