RSS
 

Установка загрузчика картинок ImagePicker и вывод изображений в боксе при помощи ColorBox (установка ColorBox).

29 Июн
Comments off

Posted by omega80 at 20:34

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

Подготовка

Для работы нам понадобятся следующие модули и плагин:

  1. модуль ImagePicker - позволяет загружать файлы и вставлять выбираемым способом в текст. Может загружать несколько картинок сразу. Обрезает до размеров превью (устанавливается в настройках);
  2. плагин Colorbox - необходим для красивого вывода содержимого в тексте - при нажатии разворачивает на весь экран для просмотра;
  3. модуль Colorbox;
  4. модуль Libraries 2 - необходим для работы модуля и плагина Colorbox.

 

Примечание: Пример того, какой файл надо качать:

Изображение

Выбирайте версию “Recommended releases” для Drupal 7.x.

 

Устанавливаем ImagePicker

Заходим в пункт «Модули» (Modules) и выбираем ссылку «Установить новый модуль» (Install new module).

Нажимаем кнопку «Обзор» и указываем где находится файл ImagePicker (куда вы его сохранили). Выделяем его и нажимаем «Открыть», после чего «Install». Если модуль установился правильно, то мы увидим соответствующую надпись.

Возвращаемся в меню «Модули» и активируем установленный ImagePicker. Незабываем сохранить изменения:

Изображение

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

Изображение

Теперь для того, что бы загрузить и вставить в текст изображение необходимо указать его местоположение на компьютере, нажав на кнопку «Обзор…» и нажать «Upload» в конце страницы. Все загруженные изображения показаны в закладке «Browse».

 

Устанавливаем Colorbox

Если вы установили свежую CMS Drupal 7, то, скорее всего у вас отсутствует модуль Libraries 2 (Внимание! Именно вторая версия модуля!!!). Установите его стандартным способом (через пункт «Модули», «Добавить новый модуль») и активируйте.

Теперь установите модуль Colorbox (который скачали с сайта Drupal, т.е. именно модуль, а не плагин. Хотя при попытке установить плагин через установку модуля система выдаст вам "colorbox-master.zip does not contain any .info files.".):

Изображение

Активируйте установленный модуль Colorbox (в меню модулей).

Теперь установим плагин Colorbox. В настоящее время плагин именуется как «colorbox-master». Для его установки необходимо зайти в панель управления хостингом, выбрать «Диспетчер файлов» и перейти в каталог. Скорее всего, если вы настраиваете с нуля ваш сайт на drupal 7, папки «libraries» у вас не будет. Создадим ее сами:

Изображение

Теперь заходим в нее и загружаем плагин. Не забываем про кнопку «обновить», если файл у вас не появился. Далее необходимо распаковать архив, для чего выделяем загруженный архив и нажимаем «Извлечь»:

Изображение

Теперь нам надо полученную папку переименовать, оставив в имени только «Colorbox». Для этого два раза нажимаем на имени «colorbox-master» и удаляем «-master» и нажимаем «Enter» на клавиатуре:

Изображение

Все, теперь переходим к интеграции Colorbox и ImagePicker.

Для нормальной совместной работы необходимо проверит настройки модуля ImagePicker:

Изображение

Примечание: у меня сразу не заработало (не появился пункт «Colorbox» в ImagePicker’е при вставке загруженного изображения в текст). Все пункты модулей были в порядке, но после проверки нажимал «Сохранить» и после этого все заработало.

Теперь пробуем добавить нашу картинку.

1. Создаем статью, для чего нажимаем «Add content» и выбираем тип «Article». Заполняем название и содержание:

Изображение

2. Загружаем при помощи ImagePicker’а картинку и переходим на вкладку «Browse» (вкладка самого ImagePicker, где находятся все загруженные изображения). Выбираем наше изображение и справа от него появляется выбор настроек. Выбираем как на рисунке, главное это отметить пункт «Colorbox»:

Изображение

3. Устанавливаем курсор в тексте статьи там, где нам надо установить картинку и нажимаем «Insert image». Код картинки вставлен:

Изображение

4. Сохраняем изменения и проверяем:

Изображение

Изображение

 

Выводы и заключения

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

Раздел: