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

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

В WordPress нужный функционал уже включен в дистрибутив (блоговый движок же, возможность присоединения картинок к постам просто обязательна), в Joomla тоже все решается стандартной комплектацией движка, пусть и криво (загрузка файла через «Медиа-менеджер» с последующим копированием адреса загруженной картинки и вставки его в статью через визуальный редактор), хотя Joomla использовал только версии 1.0.x, может в 1.5.x ситуация лучше обстоит, не знаю, не проверял.

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

Решение «в лоб» и не требующее работы над движком: ручная заливка картинок по фтп на сайт и последующая вставка html кода в тело статьи. Собственно, большинство этим и пользуется (как, впрочем, и я сам раньше).

Можно реализовать загрузку файла (в том числе и изображения) активировав входящий в стандартную поставку модуль Upload, а для отображения загруженной картинки в теле ноды скачать и установить модуль Inline.

Или же скачать и активировать модули Content Construction Kit (CCK), File Field и Image Field, после чего создать в нужном нам типе ноды дополнительное поле специально для присоединения изображения.

Два выше приведенных способа имеют ряд недостатков. Во-первых, вы не можете настроить атрибуты тэга img, поэтому текст будет идти после картинки, а не обтекать ее. Впрочем, это просто решается средствами CSS, достаточно только добавить пару строчек в файл со стилями:
img.class {
float: left;
/*где "class" – это класс тега , в случае использования
модуля inline, классом является класс "inline", а при
использовании модуля ImageField соответственно "imagefield"*/
}

И следующий существенный недостаток – изображение можно вставить только в определенное место ноды, например, до текста.

Но ведь хочется иметь возможность присоединять произвольное количество изображений и вставлять их в любое место статьи с любым позиционированием. Поэтому наиболее правильным вариантом будет использование WYSIWIG (What You See Is What You Get) редактора с возможностью загрузки изображений на сервер через веб интерфейс.

Чтобы не мелочиться, рассмотрим сразу три популярных визуальных редактора – BUEditor, CKEditor и TinyMCE. В качестве загрузчика изображений будем использовать модуль IMCE.

Визуальный редактор BUEditor с возможностью загрузки изображений

BUEditor не является визуальном редактором в чистом виде, т.к. оперировать приходится все равно html кодом. Я это недостатком не считаю, мне даже удобнее видеть не графическое представление, а сам исходник. Несравненным плюсом этого редактора, ставящим его выше всех остальных редакторов, является возможность изменения любых кнопок и создание своих собственных.

Итак, нам понадобится:

• модуль BUEditor;
• модуль IMCE.

Качаем модули, заливаем на хостинг в папку modules, активируем в Управление/Конструкция сайта/Модули (admin/build/modules).

Теперь BUEditor автоматически будет использоваться при создании новой ноды, также автоматически произошла и привязка IMCE к BUEditor. Кликнув на кнопку визуального редактора «Insert/edit image» (пиктограмма в виде фотографии заката), вы увидите функцию «Browse», с помощью которой сможете загрузить изображение с локального компьютера.

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

Все практически идеально, за исключением того, что вставляемая картинка не имеет атрибута align, и поэтому текст не обтекает ее. Добавим помимо полей адреса картинки, размеров и альтернативного текста, поле для ввода значения атрибута align, причем так, чтобы значение по умолчанию было «left», как самое часто используемое.

Идем в настройку BUEditor Управление/Настройка сайта/BUEditor (admin/settings/bueditor) и кликаем на «Изменить» напротив Editor name – Default. Мы попали в раздел создания новых кнопок или перепрограммирования имеющихся, чем и займемся. Ищем поле «Insert/edit image» и добавляем к коду следующее:
js:
var form = [
{name: 'src', title: 'Image URL', required: true, suffix: E.imce.button('attr_src')},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text', required: true},
/*ставим запятую и добавляем следующую строчку*/
{name: 'align', title: 'align', value: 'left'}
];
E.tagDialog('img', form, {title: 'Insert/edit image'});
Таким образом создаются и атрибуты горизонтального/вертикального отступов, рамки и прочие.

Стоит заметить, что модуль IMCE умный, и если вы загрузите несколько картинок с одинаковыми расширениями и именами, они не перезапишутся, просто к именам будут добавлены индексы «_1», «_2» и т.д.

Настройки максимального веса картинок, максимального разрешения, допустимые для загрузки расширения доступны в настройках модуля IMCE Управление/Настройка сайта/IMCE (admin/settings/imce). Данные настройки не зависят от используемого визуального редактора.

И не забываем при создании ноды сменить фильтр ввода с «Filtered HTML» на «Full HTML», иначе все теги порежутся.

Визуальный редактор CKEditor с возможностью загрузки изображений

Красивый и довольно популярный визуальный редактор. Ранее известный как FCKeditor, но начиная с третье версии выпускающийся под названием CKEditor. FCK – это инициалы создателя редактора и по совместительству сокращение от английского нецензурного слова, о чем автор (бразилец) изначально как-то не подумал, в результате редактор пришлось переименовать.

Нам понадобится:

• модуль CKEditor;
• сам CKEditor версии не ниже 3.1;
• модуль IMCE.

Скачиваем, устанавливаем и активируем два модуля для Drupal – CKEditor и IMCE, после чего скачиваем дистрибутив самого CKEditor и распаковываем его в папку ckeditor модуля CKEditor. Получится три вложенных папки ckeditor/ckeditor/ckeditor, где первая папка – папка модуля, вторая папка – вложенная папка модуля и третья папка – папка самого визуального редактора.

Теперь необходимо настроить права доступа. Идем Управление/Управление пользователями/Разрешения (admin/user/permissions), ставим галочку напротив «Зарегистрированный пользователь» в графе «модуль ckeditor/access ckeditor», сохраняем.

Переходим к настройкам модуля CKEditor Управление/Настройка сайта/CKEditor (admin/settings/ckeditor). Кликаем на «Изменить» напротив Профиль/Advanced и в выпадающем списке «File browser type (Image dialog)» выбираем IMCE.

Все, теперь к каждому полю для ввода текста автоматически добавляется визуальный редактор CKEditor. Хотя это иногда может быть и не желательно, например когда надо вводить заведомо не отформатированный текст. Запрет привязки CKEditor к полям определенных страниц прописывается в разделе «CKEditor Global Profile» настроек модуля (выпадающий список Visibility settings, где надо перечислить адреса или маски адресов).

Если у вас не отображается визуальный редактор, проверьте файл вашей темы page.tpl.php, перед закрывающим тегом body должна быть такая строчка:
Или же можете протестировать на теме Garland, если в ней все работает нормально, то проблему стоит искать в файлах шаблона.

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

Визуальный редактор TinyMCE с возможностью загрузки изображений

Как по мне, так один из самый красивых и удобных визуальных редакторов, причем очень популярен, встретить его можно на многих сайтах, блогах и форумах. Лично я в выборе визуальных редакторов, когда не требуются специфичные особенности BUEditor, отдаю предпочтение чаще всего именно ему.

Нам потребуется:

 

• модуль Wysiwyg (API, позволяющее интегрировать визуальные редакторы в Drupal);
• модуль IMCE Wysiwyg bridge («мост», соединяющий Wysiwyg с IMCE);
• модуль IMCE (модуль для загрузки изображений на сервер с локального компьютера);
• визуальный редактор TinyMCE (Main package).

Качаем, заливаем на сервер и активируем модули Wysiwyg, IMCE Wysiwyg bridge и IMCE. Затем качаем дистрибутив TinyMCE и распаковываем его в папку sites/all/libraries/. Если папки libraries не существует, то создаем ее.

Переходим к настройке Wysiwyg Управление/Настройка сайта/Wysiwyg (admin/settings/wysiwyg) и привязываем формат ввода «Full HTML» к редактору TinyMCE. После привязки, напротив формата ввода «Full HTML» появится кнопка «Изменить», кликаем по ней, переходя в раздел подключения кнопок и модулей.

Разворачиваем выпадающий список «Buttons and plugins» и отмечаем как минимум пункты «Image» и «IMCE». Можно сразу выбрать и другие кнопки, которые будут отображаться в визуальном редакторе, например «Bold», «Italic», «Underline». Сохраняем.

Теперь при создании ноды при выборе формата ввода «Full HTML» будет отображаться визуальный редактор TinyMCE. Для загрузки картинки с компьютера на сервер кликните на пиктограмму с деревом, появится диалоговое окошко для загрузки изображения, где вы также можете указать альтернативный текст, позиционирование относительно текста, вертикальный и горизонтальный отступы и размер рамки.

И проверьте в файле page.tpl.php вашей темы наличие строчки до закрывающего тега . В противном случае визуальный редактор не будет отображаться.

PS
Выбор директории для сохранения файлов указывается в настройках модуля IMCE, но только в пределах папки, определенной по умолчанию в Drupal (sites/default/files/). Изменить ее можно в Управление/Настройка сайта/Файловая система (admin/settings/file-system). Я иногда для хранения файлов создаю отдельную папку files в корне сайта, но это уже личное дело каждого.