Категорії

Респонсивні зображення в 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

Ми склали підбірку онлайн сервісів, де це можна безкоштовно перевірити, як відображається ваш сайт на ПК і різних мобільних пристроях.

2

Якщо хочете, щоб ваш бізнес вистояв конкуренцію, то повинні запитати себе:...

3

Будь-який сайт чи додаток має бути не тільки багатофункціональним, але й привабливим, тож він потребує роботи UX...

4

Давайте зануримося в світ шкідливих порад, поганих прикладів та мистецтва набридати користувачам за допомогою невдалого дизайну. Менше клієнтів — менше клопоту! Тож оцініть невдалі та надокучливі...

5

Є спеціальні Drupal-теми, що ідеально підходять для сайтів будівельних фірм. Вони допомагають будівельним компаніям легко та красиво презентувати свої пропозиції завдяки готовим шаблонам сторінок...

Давайте обговоримо ваш проект у всіх деталях

Шукаєте хороших Drupal-розробників? А ми тут! Яким би ви хотіли бачити проект своєї мрії? Зв’яжіться з нами і розкажіть про це. Із задоволенням втілимо вашу мрію в життя!

Приєднуйтесь до людей, які вже підписалися!

Хочете бути в курсі важливих і цікавих речей, що відбуваються? Ми інформуватимемо Вас про розвиток та нові події в Drupal, дизайні, тестуванні та ін.

Відпишіться у будь-який час