Здравствуйте, друзья! В прошлой статье я рассказал о модуле Wysiwyg, который позволяет добавить в Drupal визуальный редактор. Мой выбор пал на редактор CKEditor. Сегодня мы научим его работать с картинками. В этом нам помогут два модуля Drupal: IMCE и IMCE Wysiwyg bridge.

Модуль IMCE Drupal

Давайте посмотрим, какие возможности для работы с картинками предоставляет нам редактор CKEditor по умолчанию. Переходим на страницу создания нового материала любого типа и переключаемся на формат текста «Full HTMS», для которого задан редактор CKEditor. Жмем на кнопку «Изображение» и попадаем в окно свойств изображения.

До imce

Как видите, можно только добавить изображение с другого интернет ресурса, указав URL адрес в поле «Ссылка». Возможности загрузить картинку на сервер и использовать ее в материале нет. Эта проблема характерна не только для CKEditor, но и для других редакторов Drupal.

Для ее решения нам потребуется установить бесплатный модуль IMCE. Чтобы связать IMCE и Wysiwyg, понадобится еще один дополнительный модуль — IMCE Wysiwyg bridge. Установите оба модуля в систему и активируйте.

Переходим к настройкам в раздел «Конфигурация» — «Мультимедиа» — «IMCE». Здесь представлено два профиля:

  • User-1 — ему доступно все: загружать файлы любого объема, закачивать, удалять и редактировать картинки, разрешен доступ ко всем каталогам директории /sites/default/files. Кстати, советую создать в ней отдельную папку images под картинки.
  • Sample profile — профиль с ограниченными правами и функциями. Имеет доступ только к своей папке, которая создается автоматически после начала работы пользователя с IMCE.

Если вы не единственный пользователь Drupal, то имеет смысл задать профили для ролей:

Профили для ролей

  • administrator — User-1;
  • авторизованный пользователь — Sample profile;
  • анонимный пользователь — не указано.

Далее переходим в настройки редактора CKEditor, выбранного для Full HTML.

Редактирование ckeditor

В разделе «Кнопки и плагины» включаем IMCE. Сохраняем все настройки и вновь переходим на страницу создания нового материала. Переключаемся на формат Full HTML и заходим в «Изображения».

Выбор на сервере

Теперь нам доступна функция «Выбор с сервер». Открывается окно, напоминающее файловый менеджер. В левом столбце представлены все папки каталога /sites/default/files. В данном случае он считается корневым. Сверху имеются пять функциональных кнопок: закачать, превью, удалить, изменить размер и вставить файл.

Посмотрим на IMCE в действии — загрузим на сервер картинку, отредактируем ее и вставим в текст материала.

1. Загружаем картинку на сервер в каталог <корень>/images.

Загрузка картинки на сервер

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

2. Картинка загружена, изменим ее размеры.

Изменение размеров

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

3. Картинка отредактирована и мы нажимаем кнопку «Вставить файл».

4. Попадаем в окно «Свойства изображения».

Свойства изображения

  • Обязательно задаем Альтернативный текст для изображение. Это важно с точки зрения поисковой оптимизации материала.
  • Размеры картинки уже заданы.
  • Граница — задаем ширину рамки в пикселях.
  • Задаем отступы по горизонтали и вертикале.
  • Указываем выравнивание.

Обязательно обращайте внимание на поле «Предпросмотр». Там показывается, как будет выглядеть картинка в материале.

Далее идем на вкладку дополнительно и заполняем поле заголовок.

Опция - заголовок

После этого жмем «ОК» и любуемся полученным результатом.

На этом на сегодня все. Надеюсь, знакомство с модулем IMCE оказалось для вас продуктивным. Спасибо за внимание! Берегите себя.

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.