static_rocket_468x60.jpg

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

редактирование изображений в Drupal

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

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

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

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

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

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

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

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

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

настройки поля с manual crop

Кроме доступных стилей можно указать обязательные. 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 под картинкой.

focal point

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

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

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

умная обрезка картинок

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

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.

оценить статью: 
Средняя: 5 (7 оценок)

Комментарии

6
Аватар пользователя Давыдова Надежда

Давыдова Надежда пн, 10/05/2015 - 18:52

Я тоже предпочитаю заливать уже отредактированные изображения, чтобы не терять качество и получать нужный результат. Доверять движку обрабатывать изображения не стоит )

Аватар пользователя Александр Каратаев

Александр Каратаев пн, 10/12/2015 - 08:47

Я тоже практически не редактирую картинки средствами движка сайта. Готовлю их заранее...
Олег, как вам ощущения от Друпал? Имею опыт работы с Жумлой и Вордпресс, а вот с Друпал не сталкивался... Какие преимущества/недостатки по сравнению с тем-же Вордпресс?

Аватар пользователя Oleg

Oleg пн, 10/12/2015 - 14:26

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

Считается что Drupal сложнее но не столько чтобы это стало причиной отказываться. Изначально Wordpress был движком для блога. Drupal - универсальная CMS на которой можно сделать  блог, большой сайт (с модераторами регистрацией и прочим), интернет магазин или социальную сеть.

Модули для CMS обычное дело но у Drupal есть несколько которые не описать, их надо пробовать. Один из них Views. Этот модуль представляет простой интерфейс для составления запросов к базе данных. Можно используя фильтры вывести определённый контент, комменты или профили пользователей и настроить вывод в виде блоков, страницы, можно сделать табами или слайдшоу.  Многое можно сделать не умея программировать вобще. А если вы знакомы с PHP то CMF Drupal предоставит вам неограниченные возможности кастомизации. 

Drupal из коробки умеет делать несколько групп пользователей с разным уровнем доступа.

Честно говоря с Wordpress практически не работал поэтому обективно судить не получиться. Единственный плюс у WP он проще и легче для новичка. Обновление движка и модулей делается из админки в оди клик. На Drupal такого нет и я не думаю что будет. Дело в том что есть класная штука Drush. Drush обновляет движок сделает бэкап и много ещё чего. Есть только один нюанс для Drush нужен ssh доступ и устанавливается он на сервер. Вобщем те кто пять минут назад решил попробовать поставить сайт выберут WP.

эта картинка наглядно показывает как обстоят дела с теми кто решил поробопать друпалУчим Drupal

Drupal как никакой другой движок даёт свободу и простор для творчества.

Аватар пользователя Александр Каратаев

Александр Каратаев вт, 10/13/2015 - 11:42

Олег, спасибо за такой подробный ответ. Будет время - поставлю на локалку и потестирую. Да, действительно, WordPress подкупает своей простотой. Я на него с Joomla перешёл, на которой довольно долго сидел - вёл там портал и форум прикручивал на PHP3bb...
А перешёл собственно из-за сложности обновления до новой линейки движка. Оказалось гораздо менее трудо- и время-затратным, перенести все материалы на WordPress, чем перейти с Joomla линейки 1.5 на более старшую... Когда-то стоял перед таким выбором...
Спасибо за информацию.

Аватар пользователя Oleg

Oleg вт, 10/13/2015 - 14:25

Будут вопросы по Drupal обращайтесь чем смогу помогу

Аватар пользователя Бонсай

Бонсай чт, 11/12/2015 - 09:56

Здорово, мне понравилось!!! Толково написано,спасибо за хорошую статью . Буду чаще посещать ваш симпатичный сайт, жду новых публикаций!!!

Добавить комментарий