Респонсивні зображення в Drupal 8: ідеальні на будь-яких пристроях!

03.11.2017
Респонсивні зображення в Drupal 8: ідеальні на будь-яких пристроях!
Автор:

Коли «менше» означає «більше»? Коли картинки на вашому сайті зменшуються згідно з екранами мобільних пристроїв — а задоволення користувачів, охоплення аудиторії, швидкість сайту, а також ваші прибутки впевнено зростають. Чудова формула, правда? Ця магічна здатність картинок підлаштовуватись під розмір екрану яскраво ілюструє те, як працює респонсивний дизайн. А особливо прекрасно він працює в новій версії Друпала — 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”!

Голосів: 1 Рейтинг: 5

Також по темі

1

Адміністратори сайтів його обожнюють, Drupal-новачки починають саме з нього, а розробники зі стажем творять з ними неймовірні речі. Views у складі ядра вважається одним із найбільших...

2

Використовуючи Drupal-модуль Superfish, який інтегрує плагін для меню jQuery Superfish, можна створювати інтерактивні багаторівневі меню з винятковим рівнем...

3

Кожні півроку виходить свіжа підверсія Drupal 8 з безліччю привабливих новинок. Отож, ще один великий день настав! Ця осінь особливо багата на подарунки, тож 4 жовтня відбувся реліз Drupal 8.4.0....

4

Ми хочемо вам у дечому зізнатися. Чесно кажучи, ми стаємо трішки шопоголіками ;) Після...