Drupal 7 Установка colorbox + insert button

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

Для того что бы изображение  увеличивалось при нажатии на него существует плагин - ColorBox. Для вставки кода изображения - кнопка Insert Button.

Теперь, собственно перейдем к этапам установки.

  • Скачиваем и распаковываем плагин Colorbox  с сайта http://colorpowered.com/colorbox/  в папку sites/all/libraries  (если нет папки libraries то создаем)
  • Скачиваем  модуль Colorbox с оф. сайта Drupal http://drupal.org/project/colorbox
  • Заходим на страницу управления модулями включаем модуль Colorbox
  • Заходим в настройки модуля в пункте "COLORBOX PLUGIN SETTINGS" указываем наш путь в который мы копировали плагин, то есть "sites/all/libraries/colorbox" при желании меняем другие настройки
  • Далее "Конфигурция - > Виды показа изображений - > Добавить стиль, назовем новый стиль colorbox.
  • Дальше,  нам нужно прикрепить изображение Colorbox  к какому - либо материалу, например "article (Заметка)"  для этого заходим в структуру - > типы содержимого и в строке редатирования типа "Article (Заметка)" нажмем кнопку управлять отображением:
    кнопка управлять отображением
  • В появившемся окне в поле формат указываем colorbox: 
    colorbox
  • Далее нужно указать как выводить изображение на странице, для этого в открытом окне жмем кнопку рядом с надписью "оригинальное изображение" :
    Кнопка оригинальное изображение
  • В открывшемся окне указываем настройки формата: "Node image style->large", "Colorbox image style -> (нет) Оригинальное изображение". node image style - это размер изображения, которое выводится на странице, Colorbox image style - размер изображения при клике на него. 
    формат изображения
  • Сохраняем настройки и для того что бы посмотреть проделанную нами работу добавим новую заметку, и в поле image заметки загрузим какое нибудь случайное изображение.

Далее открываем нашу заметку смотрим результат, как мы видим изображение вставилось автоматически перед текстом нашей заметки, Это накладывает ограничения на расположения изображения в тексте. То есть если нам нужно будет добавить несколько изображений в разные места текста,  то они все будут выводиться перед текстом, что нас не устроит.

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

Для установки:

  • Первое скачиваем и устанавливаем модуль insert http://drupal.org/project/insert
  • Заходим "Конфигурация->Colorbox" и в настройках INSERT MODULE SETTINGS указываем стиль изображения (large). Этот стиль будет использоваться при вставке изображения
  • Для того что бы активировать INSERT MUDULE: "Структура->Типы содержимого-> Article(Заметка) -> Управлять полями". И в колонке "Действия" жмем кнопку изменить
  • В появившемся окне находим вкладку "INSERT" включаем "Enable insert button" и снимаем галочку automatic и отмечаем все colorbox стили
  • Далее убираем показ изображения в настойках отображения. То есть Структура->Типы содержимого->Article(Заметка)->управлять отображением -> Формат Image делаем скрытым.
  • В общем то все сделано, что бы проверить "Добавить содержимое->Article(Заметка)"  появится поле Image и кнопка insert -> загружаем изображение жмем Insert -> Сохраняем и радуемся :)

Видео этого урока можно посмотреть здесь http://ontwik.com/drupal/colorbox-module-and-plugin-on-drupal-7/

P.S. Вот и после долгого перерыва закончил очередной урок по Drupal, наверно благодаря хорошим отзывам по прошлому уроку, приятно осознавать что кому то пригодились мои статьи. 

Оставлен Анна (не проверено) 2 Ноябрь, 2011 - 13:42

а почему эти настройки не применяются для типа Содержимого - Страница? (вижу изменения только для Статей)

Оставлен admin 2 Ноябрь, 2011 - 14:11

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

Добавьте изображение colorbox в настройках отображения для типа содержимого "Страница" и все заработает. 

По тексту описание с  "Дальше,  нам нужно прикрепить изображение Colorbox  к какому - либо материалу, например "article (Заметка)"  для этого заходим в структуру - > типы содержимого и в строке редатирования типа "Article (Заметка)" нажмем кнопку управлять отображением:"

Оставлен Анна (не проверено) 2 Ноябрь, 2011 - 15:51

странно, там поля Image не оказалось

Оставлен admin 2 Ноябрь, 2011 - 15:55

Что бы появилось: "Стуктура->Типы содержимого->Страница->Управлять полями"  добавьте поле "Изображение"

Оставлен Fastiosal (не проверено) 27 Ноябрь, 2011 - 18:50

Вебмастер и читатели играют в прятки. Все пишут и пишут, а администратор прячется как партизан.

Оставлен admin 27 Ноябрь, 2011 - 20:05

Ну уж извините если не успел вовремя ответить. Я сам явлюсь и администатором сайта и веб мастером. 

Оставлен Виталий (не проверено) 27 Ноябрь, 2011 - 19:08

Спасибо большое!!! По моему запросу Гугл выдал первым Ваш сайт. И сразу такое замечательное решение (для меня, как новичка, очень популярно объяснено)!

Оставлен admin 27 Ноябрь, 2011 - 20:07

Рад был помочь. Да, для загрузки изображений можно теперь обойтись без модуля imce. 

Оставлен Марина (не проверено) 28 Декабрь, 2011 - 09:37

Спасибо за урок!
Но у меня, почему-то получается, что превьюшки не кликабельны, а после текста в столбик выстраиваются все изображения, присутствующие в тексте. Вот они-то и открываются по клику... :-(

Оставлен Марина (не проверено) 28 Декабрь, 2011 - 10:04

Даже не так: если вставляю одну картинку - все замечательно, но стоит вставить еще картинки или текст, то только маленькие некликабельные картинки, а под текстом в столбик все изображения... :-(

Оставлен admin 28 Декабрь, 2011 - 10:50

По порядку:

  1. Рядом с кнопкой insert указан стиль colorbox?
  2. "под текстом в столбик все изображения" - уберите показ изображения в настойках отображения. То есть Структура->Типы содержимого->Article(Заметка или тип для которого настраивали)->управлять отображением -> Формат Image сделать скрытым

Оставлен Shumov (не проверено) 5 Январь, 2012 - 15:04

Почему показывает до клика картинку в её полный размер, когда кликаю показывает нормаольно.

Оставлен Алексей (не проверено) 12 Январь, 2012 - 00:49

Сделал всё в соответствии с указаниями. Но после загрузки в статью вставляется только рамка рисунка с альтернативным текстом. При клике появляется окно с надписью "This image could not be loaded". Похоже, что ошибка в пути к файлу. Может где-то надо было прописывать пути загрузки?

Оставлен admin 12 Январь, 2012 - 11:44
"This image could not be loaded" означает что либо формат изображения не поддерживается, либо в папке куда копируется изображение нет прав на запись.
Изображения по умолчанию копируются в папку /sites/default/files/(своя подпапка модуля) Установите права на запись в папку /sites/default/files/
Либо попробуйте загрузить изображение с другим форматом.

Оставлен Алексей (не проверено) 12 Январь, 2012 - 23:51

Права на запись установил. Файлы на сервер загружаются в папку /sites/default/files/. Но даже миниатюры нет. После вставки в текст путь у рисунка - /sites/default/files/styles/large/public/..., а там никакого рисунка нет. Ничего не понимаю.

Оставлен admin 15 Январь, 2012 - 16:04

Возможно у сервера есть ограничение на размер загружаемого изображения, попробуйте загрузить маленькое jpg изображение.

Оставлен Алексей (не проверено) 17 Январь, 2012 - 16:33

При загрузке через поле Image без использования Colorbox изображения загружаются нормально, т.е. оригинал на сервере есть. А вот с другими видами показа изображений (thumbnail, medium, large) проблема. Они на сервере не создаются.

Оставлен admin 18 Январь, 2012 - 14:50

Еще один вариант ошибки: На сервере  не установлена библиотека gd. Она занимается обработкой изображений.  

Мне не очень понятно в чем проблема, если сможете предоставить доступ могу попробовать исправить. 

Оставлен ВИТАЛИЙ (не проверено) 7 Ноябрь, 2012 - 02:39

Над загрузкой фото есть выбор Формат атекста, по умолчанию -filtered HTML, если поставить - full HTML тогда должно отображаться.

Оставлен Ольга (не проверено) 5 Июль, 2013 - 14:34

Действительно в этом и была причина!

Оставлен Гость (не проверено) 12 Январь, 2012 - 17:33

А обтекание для картинок вставленных таким способом,как нибудь можно сделать?

Оставлен admin 15 Январь, 2012 - 16:00

Да, в визуальном редакторе: Правой кнопкой мыши на изображении -> Свойства изображения -> Выравнивание 

Оставлен Витаха (не проверено) 15 Январь, 2012 - 18:27

выдает ошибку и ничего не помагает все делал как написано:
You need to download the Colorbox plugin and extract the entire contents of the archive into the sites/all/libraries/colorbox folder of your server.

Оставлен admin 16 Январь, 2012 - 01:17

Эта ошибка означает что модуль не нашел плагин Colorbox проверьте папку sites/all/libraries/colorbox есть ли там плагин, и проверьте в настройках модуля Colorbox пункт "COLORBOX PLUGIN SETTINGS"

Оставлен Гость (не проверено) 21 Январь, 2012 - 07:37

Ну как всегда нас радуешь своими незабываемыми постами

Оставлен Виталий (не проверено) 9 Февраль, 2012 - 21:43

Вы не знаете, как заставить модуль Insert вставлять относительные пути в редактор? Не хочется постоянно исправлять руками...

Оставлен admin 10 Февраль, 2012 - 16:05

К сожалению я не сталкивался с такой проблемой.

Оставлен Ollyka (не проверено) 24 Февраль, 2012 - 16:54

Хорошая статья. Спасибо. Очень помогла!

Оставлен Илья (не проверено) 5 Март, 2012 - 15:33

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

Forbidden

You don't have permission to access /mafia/sites/default/files/temporary/mafia_1_0.jpg on this server.
Apache/2.2.14 (Ubuntu) Server at 172.16.100.10 Port 80
подскажите как решить такой трабл??

Оставлен admin 11 Март, 2012 - 10:34

Если вы через линукс работаете, то для папки sites/default/files chmod -R 775 поставить

Если через windows, то в total commander для sites/default/files и всех вложенных папок файлы->изменить атрибуты и поставить 775

Оставлен Гость (не проверено) 16 Март, 2012 - 09:17

Пункты выбора стилей Colorbox large и т.д. можно перевести?

Оставлен admin 2 Апрель, 2012 - 13:10

Да, просто зайдите в настройки и переименуте

Оставлен Алексей (не проверено) 19 Март, 2012 - 13:32

На денвере все отлично работает и код вставляется и отображается как надо. А вот на хостинге кнопка не работает. т.е. код не вставляется никуда. И если этот код вручную вбить, загрузить файлы на хостинг в нужные папки, то картинка не отображается. В чем может быть проблема?

Оставлен admin 2 Апрель, 2012 - 13:10

В первой статье по установке на хостинг есть список необходимых включенных модулей сервера, проверьте список. Установите недостающие модули.

 

"И если этот код вручную вбить, загрузить файлы на хостинг в нужные папки, то картинка не отображается." - проверьте права доступа на папку sites/default/files/ должны быть 775. Если вбиваете вручную то проверьте еще раз пути все в коде, должно быть нормально.

Оставлен Светлана (не проверено) 20 Март, 2012 - 12:01

У меня не видны кнопки Next, Prev и др. По клику на уменьшенном изображении просто появляется оригинальное изображение. В свойствах colorbox эти кнопки прописаны. В чем может быть причина, не могли бы Вы подсказать? Заранее спасибо.

Оставлен admin 2 Апрель, 2012 - 13:03

В настройках colorbox "admin/config/media/colorbox" в пункте "Insert image gallery" поставить  "Per page gallery"

Оставлен Гость (не проверено) 25 Март, 2012 - 17:01

Неплохо такое отвлечься-почитать.Скажем так-впустить разнообразие в серые, рабочие будни.

Оставлен Антон Чиков (не проверено) 28 Май, 2012 - 20:17

У меня на сайте на все картинки при добавлении добавляется обесцвечивание (модуль ImageCache Actions), т.е. картинки становятся черно-белыми. Когда смотрим в статье все нормально фильтр работает, когда нажимаю на изображение ColorBox выводит цветное изображение, т.к. мы картинку скрыли, для неё нельзя поставить отображение в полном размере. Как победить этот глюк.
Заранее благодарен.

Оставлен admin 29 Май, 2012 - 16:34

По ходу дела ImageCache Actions не обрабатывает оригинальное изображение, попробуйте сделать в "Colorbox image style" указать не оригинальное изображение, а просто большое. Перед этим естественно создайте стиль для большого изображения.

Оставлен Artu (не проверено) 4 Июнь, 2012 - 01:17

Спасибо за инструкцию.

А почему формат для кнопки Insert нужно делать скрытым?
А если мне нужно и field изображение для вывода во вьюхе и изображение в визуальном редакторе?

Можно ли использовать colorbox совместно Image Resize Filter?

P.S. Вставка а визуальный редактор через field (бывшее CCK) поле мне кажется не очень логичным. Может я не привык еще...

Оставлен admin 4 Июнь, 2012 - 15:59

"А почему формат для кнопки Insert нужно делать скрытым?" - Просто что бы не дублировать изображение. 

"А если мне нужно и field изображение для вывода во вьюхе и изображение в визуальном редакторе?" - Как Вам угодно :)

"Можно ли использовать colorbox совместно Image Resize Filter?" - можно

"P.S. Вставка а визуальный редактор через field (бывшее CCK) поле мне кажется не очень логичным. Может я не привык еще..." - Я рассказал о возможном решении, подойдет или не подойдет оно, Вам решать.

Оставлен найти любовника... (не проверено) 28 Июнь, 2012 - 16:33

Занятно! Реально просто отлично написано. :)

Оставлен Ольга (не проверено) 12 Август, 2012 - 12:33

Все сделала по инструкции, еще два раза перепроверила. Картинка в тексте, кликабельна, все окей, но внизу страницы под текстом она дублируется в полный размер. Не могу понять в чем причина, Image скрыт везде.

Оставлен admin 13 Август, 2012 - 09:57

Попробуйте сбросить кеш, а вообще что бы  мне понять причину нужен доступ к сайту, так как возможных вариантов много

Оставлен avmservise (не проверено) 26 Август, 2012 - 12:05

Случайно наткнулся на Ваш сайт, нашел то что так долго искал. Спасибо! Добавил в закладки.

Оставлен Вера (не проверено) 1 Сентябрь, 2012 - 23:02

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

Оставлен admin 4 Сентябрь, 2012 - 12:00

Содержимое -> типы содержимого и в строке редатирования типа "Article (Заметка)" жмем кнопку управлять отображением и в открытом окне жмем кнопку рядом с надписью "оригинальное изображение" :

Проверьте настройки формата: "Node image style->large", "Colorbox image style -> (нет)

Оставлен Павел (не проверено) 12 Март, 2013 - 02:26

Вери вери дякс...
Просидел на 6ке года 4ре. Перехожу на 7ку (не правда ли позднова-то?)

И оказалось многого банально не знаю.. а тут ваши статьи.
Все легко и доступно.

Было бы интересно почитать про создание темы с нуля (включая и моб версию).
Заранее дякс (спасибо)

Оставлен Андрей (не проверено) 15 Июль, 2013 - 02:51

http://vimeo.com/19386122
Тут все понятно. Надо скрыть картинку вообще в отображении.
Еще оставить Alt поле иначе будет скрыт title

Оставлен Neo_34 (не проверено) 19 Сентябрь, 2013 - 03:02

Спасибо за хорошую статью, все работает!

Оставлен Алексей (не проверено) 20 Сентябрь, 2013 - 14:24

Подскажите, как сделать что бы в выведенным colorbox-ом окне отображалось пояснение/текст к картинке?
Поля в настройках к поле Image: "Показывать поле для ввода атрибута «title»" даёт эффект только для скрытой фотографии, а для той что добавляется модулем "Insert" нет никакой подписи

Оставлен admin 21 Сентябрь, 2013 - 12:50

После настроки "показывать title.." поля image  при добавлении новой статьи появляется такая подпись:

Если поля "заголовок" нет, то скорее всего дело не в настроках, а в другой, неисзвестной мне проблеме. Попробуйте переустановить модуль, заново сделать настроки или проверить всё еще раз.

Оставлен Мария (не проверено) 11 Декабрь, 2013 - 20:38

Гмм...я не вижу данного пункта в настройках модуля. Как вам выложить скрин?

Оставлен admin 12 Декабрь, 2013 - 11:59

Ваш сайт://admin/config/media/colorbox  - первая разворачивающаяся ссылка. 

Скрин в комментариях могут выложить только админы сайта.

Оставлен Юрий (не проверено) 2 Ноябрь, 2014 - 14:28

Где найти COLORBOX PLUGIN SETTINGS?

Оставлен Юрий (не проверено) 3 Ноябрь, 2014 - 00:13

Сделал все по вашему гайду, все прекрасно работает, но на главной страници не отображает тепер фото, не подскажите как это исправить?

Оставлен Вадим (не проверено) 25 Февраль, 2015 - 23:18

Такая вот проблема, кликаю на картинку, открывается все как положено в лайт боксе, появляются две кнопки как положено листалки назад и далее, при клике на кнопку далее должна открыться соседняя картинка в блоке, она открывается правильно, только не в лайт боксе, а на отдельной странице. Подскажите как это можно исправить, что б соседняя картинка открывалась в том же лайтбоксе?

Оставлен admin 26 Февраль, 2015 - 23:21

Думаю, проблема не в лайтбоксе и не в настройках, скорее всего при клике возникает какая то js ошибка, посмотрите, есть ли ошибка, если есть то нужно "плясать" от неё. 

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

comment

  • Доступные HTML теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
2011 © zapiski.pro