Як у Drupal зробити адаптивні зображення, Web On Life
Адаптивні картинки для Drupal ми отримаємо замінивши старий добрий на новий, що поки що підтримується не всіма браузерами,
можна почитати у статті про адаптивні зображення. Виконавши всі інструкції з цієї статті ви отримаєте адаптивні зображення на своєму сайті, при цьому процес додавання зображень не зміниться. Drupal не тільки замінить на
але й сам створить кілька варіантів картинки з різними розмірами.
Переходимо від слів до діла, а точніше до встановлення пари модулів. Нам потрібні модуль Picture. Назва говорить сама за себе. Модуль вийшов у результаті бекпорту модуля Responsive Image, розробленого для вісімки. Окрім цього ще візьмемо Breakpoints та Ctools (якщо у вас не тільки що встановлений сайт, то CTools швидше за все вже стоїть).
Код для елемента зображення виглядає так
Визначаються контрольні точки, вказується відповідне зображення і останнім йде fallback. Робитимемо в тому ж порядку. Почнемо з визначення контрольних точок.
Підготовчий етап. Створюємо контрольні точки, стилі та групи.
Переходимо до меню Конфігурація → Мультимедіа → Breakpoints. Вказуємо назву контрольної точки та відповідний їй медіа запит. Якщо потрібна підтримка ретину, відзначаємо в Multipliers потрібне значення. Зверніть увагу на порядок, в якому розташовані точки. У моєму прикладі з min-width першою стоїть точка з найбільшим значенням і далі за спаданням.
Справа в тому, що браузер буде переглядати умови по черзі і знайшовши перше відповідне не буде дивитися інші. Таким чином, якщо поміняти місцями точки desktop і tablet, то завжди буде відображатися маленька картинка.
Тепер об'єднаємо створені контрольні точки до групи.Тиснемо на Add a new group, вписуємо назву групи і відзначаємо створені контрольні точки.
для зображень, що вставляються як поле.
Далі розглядається випадок, коли зображення вставляються як поле. Переходимо в меню Структура → Типи матеріалів → Стаття → Керування відображенням. Якщо у вас інтерфейс Drupal переведений на українську то можлива ситуація коли у списку, що випадає, буде два пункти "зображення". Виберіть той у налаштуваннях якого є Picture mapping.
У налаштуваннях поля вибираємо групу точок та fallback.
Оновлюємо та зберігаємо налаштування. Після всіх цих налаштувань замість стандартного тега виводитиметься
з атрибутами source де буде прописано медіа-запит та відповідне йому зображення.
представляє кілька варіантів адаптації зображення. Серед них є і такий - визначаємо розмір картинки через атрибут sizes і пропонуємо браузеру кілька варіантів картинки із зазначенням розмірів. Розрахувавши розмір браузер сам вибере один із запропонованих варіантів картинки. Налаштування для такого варіанта відрізнятимуться лише останнім пунктом. У відображенні полів замість форматуЗображення вибираємоImage with sizes. У налаштуваннях вказуємо значення атрибута sizes та стилі зображень.
Значення sizes вказувати в vw(відсоток від ширини вьюпорта) і можливі медіазапити.
для зображень у тексті.
Насправді частіше потрібно вставляти зображення у текст, а чи не окремим полем. Я для цього користуюсь модулем Insert. На даний момент Insert не дружить із Picture. Сподіваюся в наступних версіях розробники це виправлять, а поки що можна скористатися патчем https://www.drupal.org/node/1954546.
Останній крок – увімкнути фільтр.
фільтр Drupal для заміни на
На цьому тема адаптивнихзображень у Drupal не закінчено. На черзі статті про те, як зробити адаптивне слайдшоу, як краще і простіше адаптувати картинку використовуючи можливості Drupal і . може у вас є якісь питання? Пишіть, спробуємо разом розібратися.
Member for
ср, 11/04/2015 - 22:56
Так, зараз дуже важливо
Member for
сб, 11/28/2015 - 19:17
Picture ще широко не
Picture ще широко не використовується, та й коли ще увійде до загального ужитку. Хоча сам собою підхід цікавий. Мені ось тільки незрозуміло – навіщо такі складнощі? Хіба не простіше в css прописати адаптивність для зображень - це нескладно.
Member for
сб, 11/28/2015 - 21:37
Тег Picture на даний момент
Тег Picture зараз нормально перетравлюють 55% пристроїв. Для решти є поліфіл.
Тепер щодо простого способу. Додавши адаптивність через css ми будемо віддавати одну і ту ж картинку і для десктопів і для мобільних що не є добре. Використовуючи picture мобілкам, можна віддавати більш легку версію картинки. Крім ваги є проблема зі зменшеними великими зображеннями, на яких у зменшеному варіанті важко щось розібрати. з picture ми можемо підготувати ще один варіант зображення, на якому буде відрізано все зайве і віддати її мобільним користувачам.
Складно вперше налаштувати користуватися одне задоволення. Залили картинку відразу відрізав зайве і все готово все задоволені :).
Member for
вт, 12/01/2015 - 19:46
Якщо зображення саме по собі
Якщо зображення саме по собі оптимізовано, то немає нічого поганого в тому, щоб воно використовувалося як для десктопних програм, так і для мобільних. Адаптивність, вона є адаптивність. Тег pictureзручний, не сперечаюся, але треба в цьому випадку готувати як мінімум два зображення.
Member for
Пт, 12/04/2015 - 15:22
У нас є така
У нас є така картинкаадаптувавши під маленький екран використовуючи css ми отримаємо що на кшталт цього
ми можемо віддати мобільним користувачам наприклад таку картинку
На ній можна зрозуміти, що за людина зображена і важить така картинка менше.
Member for
Пт, 12/04/2015 - 18:48
Відповідь на У нас є така від Oleg
Так, суть зрозуміла. Почитав
Так, суть зрозуміла. Почитав про теґ ще матеріали. Там багато можливостей - підлаштовується не лише під роздільну здатність, а й під орієнтацію пристрою. Мабуть за цим тегом майбутнє, доведеться згодом освоювати. Що не подобається - якщо зараз я просто викладаю одну картинку, яка за допомогою css адаптується під розміри екрану, то з picture, за умови використання всіх аспектів цього тега, доведеться заготувати картинок штук 10, напевно.