Стилі зображень в Друпалі: переваги і використання — блог Drudesk
050 640 98 44
support@drudesk.com

«Стильний» Drupal: стилі зображень та їхні магічні здібності

Drupal має багато вбудованих інструментів з по-справжньому магічними властивостями, і сьогодні ми опишемо один із них. Коли ми кажемо «один», важко повірити, наскільки багато він може зробити для сайту. А саме: він здатен підвищити привабливість і юзабіліті сайту, додати злагодженості в його вигляд, покращити швидкодію шляхом оптимізації зображень, а також значно заощадити зусилля та бюджет його власнику. Йдеться про “image styles”, або стилі зображень.

Але, перш ніж «зануритися» в розповідь про стилі зображень в Друпалі, необхідно поглянути на традиційне додавання картинок на сайти.

Як зазвичай завантажуються картинки на сайти

Ви час від часу (або регулярно) завантажуєте картинки на сайт або дозволяєте це робити користувачам сайту? Картинки, швидше за все, «прибувають» в різних форматах і розмірах.

Це можуть бути такі формати, як PNG, JPEG або GIF — тут уже як «складуться зірки». Розміри ж варті окремої розмови. Як величезні зображення в стилі «фон для робочого столу», так і мініатюрні картинки можуть поєднуватись на сторінках сайту в неповторному міксі, який більше заслуговує на назву «хаос».

У цьому немає ні краси, ні зручності. Крім того, правильне форматування зображень надзвичайно важливе для швидкодії сайту.

Що ж робити? Форматувати кожну картинку — це все-таки клопіт, особливо якщо у вас велика кількість картинок. Ну і, звісно, ви не станете очікувати, що ваші користувачі робитимуть те саме.

Ще одним рішенням могло б бути залучення спеціального модератора в вашу команду для форматування картинок користувачів, але це принесе додаткові витрати.

У Друпала є дещо краще для вас! Все легко оптимізується в руках хороших Drupal-експертів. Поглянемо, як Drupal може вирішувати всі вищезгадані проблеми за допомогою стилів зображень (image styles).

Drupal і стилі зображень

Перш за все, Drupal дозволяє накласти певні обмеження на картинки, що завантажуються (мінімальне і максимальне розширення, максимальний розмір і конкретні формати). Це доступно в налаштування поля для картинок конкретного контент-типу (статті, товару і так далі).

Однак, стилі зображень в Друпалі подарують вам ще більше можливостей. Вони здатні автоматично форматувати всі картинки згідно з точними вимогами.

Стилі зображень в Друпалі дозволяють застосовувати різні ефекти. А саме, можна конвертувати в інший формат (convert), обрізати (crop), робити чорно-білими (desaturate), змінювати розмір (resize), повертати (rotate), масштабувати (scale), а також масштабувати і обрізати одночасно (scale and crop).

За допомогою стилів зображень, ви можете точно обирати ширину та висоту картинок і багато інших характеристик.

Можна створювати багато різних стилів зображень і застосовувати їх до контент-типів, колекцій контенту на сторінках і так далі.

Окрім створення кастомних стилів зображень, можна використати готові стилі зображень, що пропонує Drupal. Наприклад, ви хочете, аби всі ваші статті супроводжувались картинкою середнього розміру і не маєте особливих вимог до неї. Тоді можна обрати готовий стиль “medium” (220 x 220) і додати його до контент-типу «стаття».

«До і після» застосування стилів зображень: яскравий приклад

Давайте поглянемо, наскільки по-різному може виглядати колекція контенту.

Без стилів зображень:

Без стилів зображень

Зі стилями зображень (ефект “scale and crop”):

Зі стилями зображень (ефект “scale and crop”)

Коротко про те, як використовувати стилі зображень в Друпалі

Створення кастомних стилів зображень

Щоб створити кастомний стиль зображень, перейдіть в Configuration — Media — Image styles, натисніть “Add image style”, дайте йому назву і клікніть “Create new style”. Оберіть ефект, додайте його, визначте деталі його застосування, і зрештою збережіть стиль. Декілька ефектів одночасно доступні за допомогою опції “Show row weights”.

Створення кастомних стилів зображень

Використання стилів зображень у контент-типі

Перейдіть у налаштування необхідного контент-типу — наприклад, статті (Structure — Content types — Article — Manage display) і натисніть на коліщатко справа від поля для картинок. Там можна обрати один із вбудованих або кастомних стилів зображень.

Використання стилів зображень у контент-типі

Використання стилів зображень в колекціях контенту (views)

Щоб відформатувати зображення в колекції контенту, оберіть потрібний стиль зображення в налаштуваннях поля для картинок у в’юшці (якщо вона використовує поля).

Використання стилів зображень в колекціях контенту (views)

Наостанок

У статті про створення фотогалерей за допомогою Views ми згадували, як проста зміна розмірів в стилях зображень дозволяє змінювати відстані між картинками без жодного «доторку» CSS.

І це лише початок секретів, які ховають в собі стилі зображень Друпала! Ви можете зв’язатися з нашими Drupal-розробниками і довірте їм місію створення ідеальної гармонії зображень на вашому сайті.

Вони точно знаю, що можна зробити в Друпалі заради привабливості, швидкості, зручності та рентабельності вашого сайту — за допомогою стилів зображень або безлічі інших чудових технік. Напишіть нам!