10. Красивые картинки, или IMCE+Colorbox

09.09.2012

Изображения на сайте могут использоваться для разных целей. Есть элементы дизайна, как, например, чертёж велосипеда, используемый мной в качестве логотипа. Есть страницы - галереи изображений, типа "Моя поездка на шашлыки", где имеется множество фотографий, которыми автор жаждет поделиться с миром. Есть иллюстрации, призванные обеспечить большую наглядность и выразительность статьи. В последних двух случаях нужно решать задачу вывода уменьшенного изображения на странице и, при клике на нём, отображения в натуральную величину. Уменьшение изображения (масштабирование и обрезка) вполне обеспечивается модулем IMCE, загружающим картинки на сервер. А вот полноразмерный вывод осуществляется лишь самым простым способом - на отдельной или этой же странице.

Модуль Colorbox  создан именно для реализации красивого вывода изображений. При клике на уменьшенную картинку поле страницы затеняется и появляется (появление и смену картинки можно осуществлять при помощи разнообразных спецэффектов) окно с изображением в натуральную величину. Проблема в том, что Colorbox обычно использует лишь изображения или наборы изображений, которые вводятся, как специально описанные поля материала-ноды. А хотелось бы "прикрутить" его и для простых изображений, загружаемых на сервер с помощью IMCE.

Принципиально это не является проблемой. Всё что нужно сделать, это установить модуль Colorbox и при вставке картинки дополнительно отредактировать ссылку, ведущую на оригинал картинки. Редактирование заключается в добавлении класса CSS "colorbox". При этом нужно после загрузки картинки на сервер и вставки её в текст, зайти в редактирование ссылки и прописать его.

По-моему, довольно много мышедвижений. Неплохо было бы так устроить, чтобы всё это происходило автоматически, и IMCE "знал" о том, что вставляемую им картинку нужно связать с colorbox-ом. Оказалось, что такой способ есть, и имя ему - Image Resize Filter. На самом деле, назначение этого модуля несколько иное, нежели связывать между собой Colorbox и IMCE. Он предназначен для автоматического масштабирования картинок, вставляемых в тело материала. Нужное нам в данном случае свойство этого модуля - установка для изображения класса CSS.

От теории перейдём к практике. Начнём с установки Colorbox. Он из тех модулей, которые, как и ckeditor, требуют дополнительной загрузки скриптов на сайт. Заходим на страницу проекта и копируем ссылку для установки.

Напомню, установка новых модулей производится так - "Модули" -> "Установить новый модуль":

Вставляем скопированную ссылку и устанавливаем модуль.

Аналогично устанавливаем модуль image_resize_filter. На всякий случай, вот ссылка на страницу проекта Image Resize Filter.

Включаем установленные только что модули.

После включения, модуль Colorbox тут же сигнализирует о том, что ему для работы, собственно, нужен сам скрипт. В разделе "Конфигурация" -> "Colorbox" он предлагает ссылку, пройдя по которой этот скрипт и можно найти. Там же есть и путь по умолчанию, куда распакованный архив нужно положить. Отмечу, что папки "libraries" в стандартном drupal нет, её нужно будет создать.

После распаковки скачанного colorbox.zip в нужное место, предупреждение исчезает, остаётся лишь установить флажок "Enable Colorbox load" в настройках. Настройка фильтра Image Resize Filter осуществляется для определённых форматов текста. В данном случае меня интересует формат "Full HTML", другие форматы у меня не предполагают вставки изображений. Итак, идём в "Конфигурация"->"Форматы текста" и выбираем "настроить".

Здесь в разделе "Включённые фильтры" включаем фильтр "Image resize filter", в открывшейся одноименной вкладке включаем настройку "If resized, add a link to the original image." и в открывшееся ниже поле вписываем нужный CSS класс - "colorbox-load". Сохраняем внесённые изменения.

Ну, вот и всё. Теперь изображения, вставляемые в текст в редакторе ckeditor средствами модуля IMCE будут отображаться красивым вьювером Colorbox. Более того, теперь в "Свойствах изображения" при вставке не нужно прописывать путь к оригинальной картинке в разделе "Ссылка", image_resize_filter  делает это сам. Начиная с этой статьи, все изображения  теперь будут отображаться Сolorbox-ом.
 



Комментарии

Андрей
18.09.2012

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

kwoqer
19.09.2012

Вообще-то, colorbox включается в том случае, когда размер картинки изменяется, то бишь уменьшается. Если вставить картинку с "родными" размерами, image_resize срабатывать не будет. Соответственно, класс colorbox_load не будет присвоен. Или Вам нужно вставлять уменьшенные картинки и не использовать при этом colorbox? Если так, то не надо включать image_resize, а для картинок "под colorbox" вручную добавлять класс colorbox-load (как я описывал в начале поста).

hrizolyt
29.09.2012

Отличное и достаточно элегантное решение :) Использовал у себя на allFrance.net

Dastiw1
01.03.2013

Спасибо тебе! Долго искал как включить colorbox на файлы загруженные через IMCE.

Jaan Pajusalu
01.01.2015

Спасибо большое за публикацию. С первого раза не заработало нужно было поставить галочку в настройках модуля colorbox
Enable Colorbox load

Валерий
30.01.2015

Как бы еще так сделать, чтобы при открытии картинки в colorbox, можно было бы листать остальные картинку уже внутри колорбокса...

Валера
30.01.2015

А кстати я таки и нашел как это сделать - просто в настройках плагина Image Reseizer надо выставить атрибут rel, например "xyz" (не важно какой). И тогда все фотки текущей ноды объединяться в одну галерею.

Валера
30.01.2015

И еще у вас тут с этой капчей конечно трудности. Я вот почти что расхотел ее собирать. Я себе ставлю просто honeypot. А для уведомлений о комментах comment_notify - так люди хоть возвращаться будут, чтобы прочитать что вы им ответили.

kwoqer
30.01.2015

Спасибо за полезные советы. Насчет галереи, честно говоря, я не задавался такой целью. Вроде как скриншоты смотреть по очереди не так занятно, как, например, горные пейзажи. Хотя, может вы и правы, на вкус и цвет... Не пойму, в чем трудности с капчей? Она мне понравилась именно простотой. Но на honeypot посмотрю, может и поменять стоит. На тот момент мне она показалась хорошим решением, однако времени с тех пор прошло много, наверняка появились не менее достойные варианты.

Comment_notify уже поставил, действительно полезная вещь.

Добавить комментарий