2.8. Image - Работа с изображениями, пресеты.

Главные вкладки

levmyshkin 5 июля 2019 в 17:55

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

Видео:
https://www.youtube.com/watch?v=eyGqqepUUwQ

В прошлых уроках мы создавали тип материала Сотрудник. Давайте откроем управление полями типа материала Сотрудник и добавим поле изображения.

поле сотрудник

Теперь в форме создания/редактирования сотрудника будет поле загрузки изображения:

фото сотрудника

Это изображение будет выводится на странице сотрудника, но в оригинальном размере и с лейблом поле Изображение. Чтобы настроить вывод, нужно перейти во вкладку вывод, в настройках типа материала Сотрудник.

настройка полей Drupal

Давайте переместим поле изображение наверх, уберем вывод названия поля и нажмем на шестеренку (настройки), чтобы выставить размер выводимого изображение. По умолчанию у нас уже есть размеры - пресеты: Large (480x480), Medium (220x220), Thumbnail (100x100). Давайте поставим для анонса Thumbnail, а для полной ноды Medium. Также в анонсе мы поставим, чтобы картинка была ссылкой на ноду сотрудника:

поле изображения Друпал

Теперь в списках анонсов сотрудники будут ссылкой на полную страницу сотрудника.

Также помимо уже готовых пресетов Large, Medium, Thumbnail можно создать и свои размеры для изображений. Давайте зайдем на страницу Настройка - Виды показа изображений

/admin/config/media/image-styles

Там вы увидите уже существующие пресеты и кнопку добавить новый:

виды показа изображений друпал

Пусть он будет 150x150 пикселей и назовем его также, чтобы было проще ориентироваться. На странице редактирования пресета мы видим действия которые можно добавить:

пресеты drupal

Crop (обрезка) - просто обрезает фотографию без масштабирования.
Обесцвечивания - делает фотографию черно-белой.
Изменение размера - изменяет размер без сохранения пропорций.
Вращение - поворачивает фотографию на нужний угол.
Масштабирование - изменяет размер с сохранением пропорций.
Масштабирование и обрезка - изменяет размер с сохранением пропорций, а потом обрезает по большей стороне.

Можно выбирать несколько действий, например давайте сделаем Масштабирование 150x150, а потом сделаем фотографию черно-белой.

Масштабирование:

масштабирование изображение друпал

Должно получится вот так:

image drupal

Теперь давайте вернемся на страницу управления отображения полей и поставим для анонса сотрудника вывод поля изображения через пресет 150x150.

новый пресет drupal

Теперь анонс сотрудника будет выглядеть вот так:

друпал анонс

Теперь вы знаете как загружать фотографии в друпале и как их выводить нужным вам образом. В следующих уроках мы разберем как сделать фотогалерею подобным способом.