Простое добавление картинок

Не знаю как в других с CMS а у Drupala с вставкой картинок всегда было чуть сложнее чем могло быть. По моему, такие вещи как картинки и нормальная форма комментариев нужны любому сайту, и я бы хотел видеть всё это в базовой версии. Про комментарии есть отдельная статья, а мы сейчас займёмся картинками.
Кому интересно могут почитать немного теории Остальные могут смело переходить к разделу Drupal и картинки.

Как вставить картинку в HTML документ.

Первое о чём вы должны знать - картинка не является частью HTML файла. Картинки вставляются при помощи тега <img>. Происходит это следующим образом. Браузер получив HTML файл находит в нём тег <img src="http://адрес сайта/папка с картинками/названиекартинки.jpg">. После этого он скачивает картинку расположенную в http://адрес сайта/папка с картинками/названиекартинки.jpg и вставляет её вместо тега. В теге <img> кроме атрибута src, содержащего адрес, есть ещё пара интересных для нас атрибутов. alt - альтернативный текст. Выводится вместо картинки если её не возможно скачать. Title, как и alt, служит для описания картинки, с той разницей, что текст из этого атрибута будет появляться при наведении курсора на картинку. Подробнее про тег <img> читайте в <a>webonlife-справочнике</a>.

Drupal и картинки.

Чтобы вставить картинку в нужное место нам нужно:

1. Закачать картинку на сервер.
2. Вставить в нужное место тег <img>

Для закачивания картинок можно воспользоваться FileZilla. Тут описано как работать с этим ftp-клиентом. Картинки на месте, переходим на страницу создание контента.

Жмём кнопку добавления картинки. В открывшемся окне вписываем адрес изображения в поле Image URL, жмём Insert. Вы наверное заметили кроме адреса ещё несколько полей. Они нужны для определения отступов, границ, размеров. Но для нас это лишнее.

Трудности с которыми вы можете столкнуться:

1. Нет кнопки в редакторе.
2. После нажатия Insert картинка не вставилась.

В первом случае просто настройте редактор. Как это сделать читайте в статье Настраиваем редактор и режим форматирования . Со вторым случаем немного сложнее. Сначала проверьте фильтры. Вы могли запретить все теги или не включить <img> в разрешённые или составили такую очерёдность фильтров при которой нужные теги вырезаются. Как настраивать фильтры читайте в статье про редакторы и режимы форматирования,ссылку давал выше. Список фильтров и условия фильтрации найдёте под окном редактора. На картинке в списке разрешённых присутствует тег <img>, но картинка всё равно не вставилась.

Вероятно был указан неправильный адрес. Проверить правильность адреса картинки можно введя его в адресную строку браузера. Загрузилась картинка - url правильный, вышла ошибка или другая картинка - что-то напутали в адресе.

Быстро и просто вставить картинку в Drupal с помощью модуля.

Добавление изображений через кнопку в редакторе не самое лучшее решение. Не нужно забывать что мы используем CMS, и если чего-то нет или есть, но работает не так как хотелось, поищи модуль. Не скажу, что испробовал все модули друпала для вставки картинок, но несколько забраковал прежде чем нашёл идеальный. Сразу уточню, что идеальность модуля я определял из своих желаний и потребностей. Такие опции как обзор всех картинок закаченных пользователем или всех картинок на сервере мне не нужны. Модуль Insert. Он поможет нам вставлять картинки, при этом процесс будет проходить легче, проще, веселей. Качаем модуль https://drupal.org/project/insert и ставим как обычно.

Прежде чем продолжить настраивать модули определим какого размера должна быть вставляемая картинка. Переходим Configuration → Media → Image style → Add style. Вводим название для стиля жмём create new style и приступаем к настройке.

Нам предлагают несколько вариантов обработки изображения. Мы задаём размеры для изображений в тексте, поэтому ширина картинки не должна быть больше чем блок с текстом. В моём примере ширина задана 600px. Для этого в выпадающем списке выбираем Scale, жмём Add, указываем размеры. Для Scale мы можем указать либо ширину либо высоту. В моём случае ширина картинки будет уменьшаться до 600px при этом высота будет изменяться пропорционально, то есть искажение картинки не произойдёт. Картинки можно не только уменьшать но и увеличивать, для этого должна быть отмечена опция Allow Upscaling.

Бывают ситуации когда нам нужны картинки с определённой шириной и высотой. Scale для этого не подходит, а вот Scale and Crop самое то. Также для получения картинок фиксированного размера можно использовать Resize. Отличаются они тем, что Resize изменяет размеры картинки на заданный не соблюдая пропорций, а Scale and crop сперва подгоняет картинку под размеры, а потом отрезает лишнее. Ещё можно использовать отдельно Scale с включённой опцией Allow Upscaling и следом Crop. В этом случае можно настроить какая часть картинки будет обрезаться.

Теперь переходим на страницу управления полями для типа материала Basic Page (Structure → Content type → Basic page → Manage field) и добавляем там поле для картинок. Basic Page я взял для примера. Всё что будет описано дальше нужно повторить для всех типов материалов в которых вы будете вставлять картинки модулем Insert. Как добавить поля к типу контента читайте здесь или сделайте как на скрине.

После сохранения нам предложат выбрать картинку по умолчанию. Нам это не нужно. Жмём Save field setting и оказываемся на странице настройки поля. Отмечаем Enable Alt field и Enable Title field - это позволит нам добавлять к картинкам атрибуты alt и title, что полезно для продвижения сайта. В Preview image style я выбираю thumbnail. Количество картинок (number of values) ставим unlimited.

С основными настройками закончили, начинаем настраивать модуль Insert. Чтобы модуль заработал отмечаем Enable insert button. Use absolute Paths - на ваше усмотрение. Enable insert style - выбираем стиль для вставляемых картинок. Можно отметить несколько. Default insert style - стиль картинки по умолчанию. Здесь выбираем созданный нами стиль. Сохраняем настройки.

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

Переходим на страницу добавления/редактирования материалов и проверяем работу модуля Insert. Под окном редактора у нас появилось поле NODE_IMAGE с формой добавления файлов. После загрузки картинки заполните поля alt и title, поставьте курсор в то место куда нужно вставить картинку и нажмите insert.

Самые наблюдательные могли заметить, что напротив картинки указан её размер. 456KB пожалуй слишком для одного изображения. Здесь указывается размер исходного изображения, а то что вставилось в статью после уменьшения весило около 60KB. Я бы рекомендовал вам вставлять картинки в формате jpg. Не знаю с чем связано, но при уменьшении размеров .png файлов Drupal увеличивает их вес.