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

«Стильный» Drupal: стили изображений и их магические способности

У Друпала есть много встроенных инструментов с по-настоящему магическими свойствами, и сегодня мы опишем один из них. Когда мы говорим «один», сложно поверить, как много он способен сделать для сайта. А именно: он может повысить привлекательность и юзабилити сайта, добавить слаженности в его внешний вид, улучшить скорость благодаря оптимизации изображений, а также значительно сэкономить усилия и бюджет его владельцу. Речь идет об "image styles", или стилях изображений..

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

Как обычно загружаются картинки на сайты

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

Это могут быть такие форматы, как PNG, JPEG или GIF — тут уж как «сойдутся звезды». А размеры картинок достойны отдельного разговора. Огромные изображения в стиле «фон для рабочего стола» и миниатюрные картинки могут сочетаться на страницах сайта в неповторимом миксе, который больше заслуживает названия «хаос».

В этом нет ни красоты, ни удобства. Кроме того, правильное форматирование картинок чрезвычайно важно для быстродействия сайта.

Что же делать? Форматировать каждую картинку — довольно хлопотно, особенно если у вас их большое количество. Ну и, конечно, вы не станете ожидать, что ваши пользователи будут делать то же самое.

Еще одним решением могло бы стать привлечение специального модератора в вашу команду, который будет форматировать картинки пользователей, но ведь это принесет дополнительные расходы. 

У Друпала есть кое-что получше для вас! Все легко оптимизируется в руках хороших Drupal-экспертов. Давайте посмотрим, как Drupal может решать все вышеупомянутые проблемы с помощью стилей изображений. 

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-разработчиками и доверить им миссию создания идеальной гармонии изображений на вашем сайте.

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

Похожие материалы