11 способов не испортить картинку в Drupal.

В базовой комплектации Drupal, начиная с седьмой версии, есть отличные инструменты для работы с картинками на сайте. Вы просто загружаете изображение а Drupal сам уменьшает и обрезает его до нужных размеров. Это действительно круто, особенно когда у вас сайт адаптирован под мобилки и на каждую картинку нужно две или три размером поменьше.

1. Самый простой способ обрезки изображения в Drupal.
2. Модули для кадрирования которые со всеми дружит.
3. Бьем по фокусу.
4. Для тех кто хочет доверить Drupal обрезать изображения.
5. Обрезаем изображения в текстовом редакторе.

Не смотря на удобство конвейера иногда нужна ручная работа. Drupal изменяя размеры картинки действует по правилам которые вы ему задали. Как правило оставляется центральная часть картинки, а всё остальное обрезается. Такой вариант может не устраивать по двум причинам. Первая причина - фиксированная область. Не всегда нам нужна именно центральная часть картинки. Вторая причина - большие изображения уменьшенные для мобильных пользователей. Если на дэсктопе картинка будет выглядеть приемлемо,то на экране смартфона будет трудно разобрать что на ней.

Для решении этих проблем воспользуемся дополнительными модулями. На drupal.org есть сводная таблица с такими модулями https://www.drupal.org/node/1179172. Я пробовал работать с каждым. Дальше пойдут мои впечатления и выводы. Критика с вашей стороны приветствуется.

Я не буду подробно рассказывать про все двенадцать модулей, иначе пост получится длинным и однообразным. Установка модулей отличается только наличием или отсутствием библиотек, а сам процесс редактирования картинки выглядит приблизительно одинаково. Статья рассчитана на читателей знающих о стилях изображений, полях и адаптивных изображениях в Drupal.

Самый простой способ обрезки изображения в Drupal.

Самым устанавливаемым модулем является Imagefield Crop. Этот модуль добавляет новый виджет для типа поля "изображение" - "изображение с кадрированием".

В настройках этого поля кроме стандартных, есть несколько добавленных модулем. Прежде всего это размер изображения после обрезки. Также есть пара опций включённых по умолчанию "сохранять пропорции" и "минимальный размер в зависимости от выходного размера". Первая отвечает за сохранение пропорций и не допускает искажения. Вторая ограничивает минимальный размер выделяемой области делая его не меньше чем конечный результат обрезки. Таким образом на картинке не будут выделяться пиксели. Также можно указать размер области где будет происходить редактирование изображения.

На странице добавления/редактирования контента поле с изображением выглядит так

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

Теперь о минусах. Подружить его с picture или colorbox у меня не получилось. Дело в том что модуль, после кропа картинки, делает её уменьшенную версию единственно доступной, как если бы вы сразу загрузили обрезанную версию. Как следствие вы не сможете подключить colorbox и по клику получить полную версию картинки, откроется обрезанная версия картинки. И если с Colorbox проблему можно решить, то с picture уже не получиться. Установок у этого модуля пока больше всех, но если посмотреть на динамику то будет видно что смена лидера это вопрос времени.

Модули для кадрирования, которые со всеми дружат.

Image javascript crop, Manual crop, EPSA Crop. В отличии от предыдущего модуля эта троица добавляет в стили изображения свои эффекты. Это уже хорошо, потому-что таким образом мы можем сделать несколько версий изображений адаптированных под мобилки. Разбираться как работает эта группа модулей будем на примере manual crop.

Для работы модуля нам понадобятся библиотеки imagesLoaded https://github.com/desandro/imagesloaded/archive/v2.1.2.tar.gz и imgAreaSelect http://odyniec.net/projects/imgareaselect. Само сабой без модуля libraries не обойтись. Распаковываем скачанные архивы в sites/all/libraries/ и переименовываем папки в jquery.imagesloaded и jquery.imgareaselect соответственно. Для корректной работы модуля нужен JQuery версии 1.5 а следовательно и модуль JQuery update.

Настройка модуля начинается с создания стиля изображения с соответствующими эффектами. Переходим в меню Конфигурация » Мультимедиа » Стили изображения - Добавить стиль. В списке эффектов выбираем что-нибудь с названием manual crop.

Можно выбрать как просто обрезку(manual crop) так и с сохранением соотношений сторон(manual crop and scale). В первом случае указывается минимальное значение для ширины и высоты а во втором фиксированное значение. Выбрав manual crop and scale можно будет выделить большую область чем указанное значение, конечная картинка будет отмасштабирована под заданные размеры.

После создания стилей переходим в настройки поля с картинкой. Для manual crop здесь есть отдельный блок настроек. Главное отметить чекбокс "включить", остальные опции на ваше усмотрение. Также не забудьте отметить стили доступные для этого поля.

Кроме доступных стилей можно указать обязательные. Manual crop может сам обрезать картинку без вашего участия, действуя как стандартный друпаловский картинкорез, но если вы отметите один или несколько стилей как обязательные, то при создании контента вы должны будете сами отредактировать картинки, иначе контент не сохранится. Так вы точно не забудете кропнуть картинку.

Дальше всё как с обычными стилями. На странице редактирования отображения полей добавляем созданный стиль или в случае с адаптивными картинками указываем какой стиль к какой точке относится.

На странице создания/редактирования контента, после закачки картинки, появляется выпадающий список с доступными для этого поля стилями. Красным отмечены обязательные стили которые ещё не были применены.

С другим двумя модулями почти всё так же. Установка EPSA также требует дополнительных библиотек а следовательно и модуля libraries. Javascript crop самый простой в установке. Ему не нужны ни какие дополнительные библиотеки.

Творческий процесс отсекания лишнего выглядит приблизительно одинаково. Картинка открывается в новом окне или фрейме. Выделяете часть изображения жмёте OK. Разница в том как делается это выделение. EPSA умеет сохранять пропорции но не умеет произвольное выделение. Javascript crop наоборот не умеет сохранять пропорции. Manual crop умеет всё и это его главный плюс. Единственная вещь которую может Javascript crop и не умеют остальные - кропать аватарку пользователя.

Из этой троицы я выбрал manual crop. На мой взгляд это лучший модуль. Единственное что портит впечатления - версия JQuery 1.5 далеко не самая последняя. Это может создать проблему если у вас например слайд-шоу которому нужно что-нибудь посвежее. Решить проблему можно следующим образом. Подключаем для административного раздела тему seven, она как раз для этого и предназначается. Отмечаемый "применит эту тему на странице создания контента". Теперь в настройках JQuery update выбираем для административной темы версию 1.5 а для всего сайта какую требуют слайд-шоу или другие свистелки.

Бъём по фокусу.

Simple crop и Focal Point. Эти модули потребует от вас минимума движений.

Модуль Simple Crop добавляет виджет к полю с типом "изображение". Называется виджет также как и модуль - Simple crop. После настроек поля создаём новый стиль обработки изображений или редактируем старый, добавив эффект "Apply SimpleCrop". Этот эффект должен всегда стоять первым в списке. Далее как с обычными стилями или указываем на странице управления отображением полей или в настройках picture mapping.

Работает модуль следующим образом. Вы закачиваете картинку и выделяете на ней какую-нибудь часть. Simple Crop заменяет оригинал картинки на эту часть. Остальные стили применяются уже к выбранной части картинки а не ко всему исходному изображению.
Про Simple Crop нужно помнить две вещи:

1. Simple Crop работает только с другими эффектами. Если в стиле изображения кроме "Apply SimpleCrop" других эффектов не будет то по итогу вы получите оригинальное изображение.
2. То что вы выделяете и то что получите в итоге может отличатся. Если вы выделите область 400х200 а стили настроены на 150х300 то разница будет очень заметна. Отчасти проблему можно решить задав соотношение сторон в настройках поля.

Следующий модуль полуавтоматического редактирования изображения - Focal Point. Этот модуль добавляет в стили изображений два эффекта. Создаёте стиль с одним из них и выбираете его для поля с картинкой на странице управления отображением полей. Настройка закончена. Теперь при добавлении новой картинки вы увидите на ней перекрестье. Установите его в нужную точку и модуль сохранит, заданную в настройках, область вокруг этой точки. Посмотреть что попало в кадр можно перейдя по ссылке Image Preview под картинкой.

Для тех кто хочет доверить Drupal обрезать изображения.

Smart crop. Устанавливается как обычный модуль. Добавляет в стили эффект Smart Crop. В настройках указываем размер. В отличии от стандартного друпаловского резака будет выбрана та часть картинки которая по мнению модуля должна быть в кадре. Модуль качественно срабатывает на лица. Там где стандартные инструменты могут запросто лишить фотографию головы, Smart Crop оставит её пожертвовав нижней частью изображения.

Image Focus Crop и ImageField Focus также как и Smart Crop пытаются улучшить стандартный механизм автоматического crop & scale. Получается далеко не всегда. Лучшие результаты у меня получались с Smart Crop. Но и у него бывали промахи. Вот что этот модуль решил оставить от фотографии косплейщицы Amiko

При том что вся картинка выглядит так

Модуль явно выбрал не тот участок, хотя чисто технически всё правильно - выбрал лицо.

Обрезаем изображения в текстовом редакторе.

Остались два модуля Media Crop и IMCE crop. Первый работает с редактором CKEditor и включает плагин Media crop edit instance. Плагин может изменять размер, обрезать и поворачивать картинки. Второй модуль расширяет возможности файл менеджера IMCE, добавляя возможность обрезать изображения. По дефолту IMCE умеет изменять размер, а в паре с модулем получается полный набор.

Что выбрать?

Эту тему я начал копать только из-за адаптивных изображений. Поэтому те кто не дружит с picture сразу отметались. Проведя несколько опытов с умными модулями также отказался от их использования. Они отлично подойдут для сайтов где много авторов и за ними сложно уследить как и что они делают и делают ли вообще. Для себя выбрал Manual Crop - удобный интерфейс плюс все необходимые функции. Какой на ваш взгляд модуль подойдёт лучше? Холивары в комментах категорически приветствуются и всячески поощряются.

UPD 12.2016 Manual crop перестал правильно работать. Проблема решается заменой imgAreaSelect подробнее здесь https://www.drupal.org/node/2833020 после замены файлов для manual crop можно использовать более свежи версии jQuery.