ViJu
Lightbox для картинок внутри текста (IMCE + Lightbox) в Drupal
При оформлении статьей очень частно возникает необходимость вставки картинок внутри текста,
например с выравниванием по левой или по правой стороне, часто с подписями к этим картинкам,
как это реализовать в Drupal с WYSIWYG редактором TinyMCE я писала в прошлый раз -
TinyMCE template плагин в Drupal
А теперь к этим картинкам добавим эффект Lightbox - увеличение картинки при клике на ней.
В самом модуле Lightbox уже есть фильтр, который автоматически добавит javascript для картинок с определенным классом (если этот фильтр отдельно включить).
Но вручную писать и ссылку на большую картинку, и делать thumbnail не удобно.
К счастью, есть модуль image_resize_filter (кстати, разработанный известной компанией Lullabot).
Этот модуль, как ясно из названия, сам за вас изменит размер картинки.
Работает он как фильтр, вы с помощью IMCE или даже просто в Bueditore
вставляете в текст большую картику (не thumbnail), но указываете в атрибутах width и height
размеры thumbnailа, а фильтр сделает все остальное - уменьшит картинку и добавит нужную ссылку для Lightbox.
Lightbox модуль
Для начала посмотрим как вставлять картинку с эффектом Lightbox,
установив только модуль Lightbox2.
вариант #1
Для этого нужно img поместить внутри ссылки на картинку оригинального размера
и добавить аттрибут rel="lightbox":
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox[][my caption]">image #1</a>Чтобы сгруппировать картинки, т.е. чтобы можно было пролистывать их внутри lightbox стрелочками влево и вправо:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>(подробнее, в том числе как группировать картинки см. http://drupal.org/node/356124)
Чтобы это работало lighbox скрипт должен быть включен на всех страницах -
см. в настройках модуля (/admin/settings/lightbox2) в блоке Page specific lightbox2 settings.
вариант #2
Другой вариант заключается в том, что можно не добавлять атрибут rel и не мучаться с прописыванием правильных групп,
а добавить аттрибут class в тег img:
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="images/image-1-small.jpg" class="lb"/></a>Чтобы это работало в настройках модуля (/admin/settings/lightbox2/automatic) нужно прописать этот класс:
Lightbox + Image resize filter
В обоих случаях, описанных выше, нужно
иметь две картинки - большую и маленькую,
вручную добавлять ссылку к картинке,
указывать атрибут (либо rel, либо class)
При использовании модуля Image resize filter
достаточно вставить картинку и указать размеры превьюшки в атрибутах width и height:
<img src="images/image-1.jpg" width="320" height="240">здесь /files/image-1.jpg - это большая картинка.
И если Image resize фильтр включен в настройках формата ввода,
а также в настройках самого фильтра указано, что нужно добавить тег rel=lightbox
то при просмотре страницы html будет выглядет вот так:
<a rel="lightbox" href="/files/image-1.jpg" class="lightbox-processed"><img height="240" width="320" src="/files/resize/image-1-320x240.JPG"></a>Модули
Модули, которые понадобятся -
http://drupal.org/project/wysiwyg
http://drupal.org/project/imce
http://drupal.org/project/lightbox2
http://drupal.org/project/image_resize_filter
P.S. Спасибо Андрею, за комментарии
Итак, порядок действий
(Screenshots by givchik)
- установка IMCE
- установка визуального редактора поддерживающего интеграцию с IMCE
- настройка оной
- установка Lightbox
- установка Image resize filter и настройка - в форматах ввода:
- Управление ->
- Форматы ввода ->
- настроить ->
- Правка ->
- пункт "Фильтры" ->
- чек бокс "Image resize filter",
- сохраняемся
- в формате "Filtered HTML" обязательно добавить тег img:
- Управление ->
- Форматы ввода ->
- настроить ->
- Настройка ->
- пункт "HTML filter",
- сохраняемся
- "Image resize filter" должен обрабатываться раньше "HTML filter":
- Управление ->
- Форматы ввода ->
- настроить ->
- Порядок,
- сохраняемся
- , а также в настройках самого фильтра указать, что нужно добавить тег rel=lightbox:
- Управление ->
- Форматы ввода ->
- настроить ->
- Настройка ->
- пункт "Image resize settings" ->
- чек бокс "Link to the original:" ->
- give it the class: lb, and/or a rel attribute: lightbox,
- сохраняемся.
Чтобы картинки листались внутри lighbox, укажите атрибут не lightbox, а lightbox[roadtrip] - и все, получаем готовый результат.)
1. Можно элементарный пример кода, который показывал бы как нужно вставлять картинку только с Lightbox а какой код будет с Lightbox+image_resize_filter
2. Какой код нужно вставить при Lightbox что бы можно было пролистать слайд шоу нескольких картинок стрелочками справа и слева.
дописала в пост
Здравствуйте! Такой вопрос.
У меня есть несколько картинок (красиво открываются через затемнение - все как надо) НО! У меня в этим же скриптом открываются схемы проезда. И выходит вот что. Просматривая основную галерею, листая картинки, мы в этой же галерее видим и схемы проезда (хотя они должны открываться отдельно и не отображаться в основной галерее картинок).
Как можно исправить?
по скольку я не разработчик, а с друпалом знаком не давно... Хочу уточнить, создает ли данный способ галерею как на Вашем сайте?
Если я правильно понял, делает она следующее:
Если все правильно, то это то что мне нужно! Способов применения у такого решения тьма:
И собственно возникает вопрос, к вам, как специалистам: чем радикально отличается ето решение от Легкий способ публикации картинок в FCKeditor + IMCE + Lightbox2
Если же, где-то, в силу своей неопытности, нехватки знаний, ошибся прошу поправить и подсказать способ реализации.
Уточню еще раз что мне нужно:
Спасибо вам огомное!)
Да, вам полностью подходит описанный мною способ,
что же касается ссылки с хабра - Легкий способ публикации картинок в FCKeditor + IMCE + Lightbox2,
то там решение совсем не легче и не гибче, к тому же и не очень правильное с точки зрения принципов друпала (если уж что-то добавлять в код, то не в page.tpl.php, а в template.php или еще правильнее - делать это через свой модуль).
Что касается каруселей - это тоже можно, если действительно нужно, опишите задачу подробнее и я напишу как лучше это сделать.
PS: спасибо за такой подробный комментарий :)
Как рад читать ваш ответ.)
Насколько понял, полностью скрытый от глаз, простого пользователя, процесс - IMCE + Lightbox + Image resize filter.
Так мы получим процедуру следующего характера:
в результате при просмотре мы видим:
Мне же нужно для этого сделать:
и все, получаем готовый результат.)
Да, выглядит все так,
если в процессе окажется, что что-то упустили, вы же допишите сюда, правда? :)
буду благадарна
Все сделал в таком порядке. Добавляю картинку, а lightbox не пашет и class="lb" не прикрутился.
В чем может быть проблема?
приятен мне ваш блог, однозначно добавляю в закладки, и уже смотрю статью Рубаночком по друпальчику
Также мне очень интересно спросить про карусель, ведь вы так вежливо предложили....
условий для карусели не много:
в визуальном редакторе или при загрузке картинки в статью, вместе с параметрами изображения(если хотеть то хотеть по максимуму)
жду вашего ответа с нетерпением.)
Рубаночком... это уже очень очень старая статья...
По поводу карусели.
Вопрос - зачем для карусели использовать картинки включенные в текст через визуальный редактор?
Ведь в этом случае картинки будут дублироваться - картинки в тексте и картинки внизу в карусели.
На мой взгляд здесь более логично и удобнее использовать CCK поле для этих картинок, и к тому же это будет гораздо проще в реализации.
в галереях как Gallerix или Galleria:
вот что нужно мне:
Вроде все.)
OK, поняла - значит картинки в карусели должны быть теже самые, что находятся внутри текста.
Так как в друпал сообществе все меняется очень быстро - то у нас уже есть новый еще более удобный способ добавления картинок в текст, чем использование IMCE в визуальном редакторе:
Картинки добавляем через CCK поля с использованием модуля FileField Insert.
Демонстрация использования Image Resize Filter + FileField Insert - http://mustardseedmedia.com/podcast/episode29.
Дальше осталось сделать из этих картинок в CCK полях карусель.
Есть как минимум два варианта:
1. Сделать карусель "в ручную" - через темизацию, но в этом случае все настройки в коде.
2. Сделать карусель через view - все настройки доступны на странице редактирования view, тип вывода (карусель или просто список) всегда можно поменять, lightbox цепляется там же
спасибо, приятно видеть такое внимание.
Интересно было б увидеть демо работы такой связки. Ведь не только для дизайна, а и для юзера в первую очередь.
Ставить IMCE только ради возможности управление файлами для пользователя в удобном интерфейсе, не интересно. А следить за этим вместо них.....
Для полного счастья на том же уровне начинаем маркеры у Upload path:
юзера, лежат в одном месте, а процесс автоматизирован.
А при этом создаем с помощью этого галерею и изображения на сайте. Просто песня. Отпадает потреность в:
Можно поставить только модуль для приватности статей, и все!) Собственно помогает и на блоках сэкономить.
Для пользователя это супер основная масса функций реализуется через одно и то же... К примеру.. Пользователь прикрепил файл, в котором была ошибка. Что ему делать в такой ситуации?
А если так:
Всем хорошо ведь даже у админа работы меньше, ведь все лежит в одном месте и пользователи делают это все сами. В joomla нужно было сильно извернутся чтоб с сменой изображения (которое при такой конфигурации просто можно подменить) подчистить все папки с маленькими, большими.....
По этому склоняюсь в сторону "визуальный редактор + IMCE + Lightbox + Image resize filter" чем "визуальный редактор + IMCE + Lightbox + Image resize filter + FileField Insert"
Немало важен и факт развития Drupal. Иногда многое кардинально меняется и чем меньше, сторонних, модулей хранящих информацию тем лутше. Значительно проще ситуация с такими вещами как ноды (они уже не куда не денутся) и файлами, а способ обработки всегда найдется. Собственно связка "визуальный редактор + IMCE + Lightbox + Image resize filter" только обрабатывает файлы и их вывод в нодах, а инфа находится в ядре.)
Буду рад найти с вами еще много общих тем....
Протестирую отпишусь...)))
интересный сайт и особенно тема по вопросам программирования, сборки, и развития сайтов.
Забыл вставить в предыдущий пост.)
ну что вот и пришло время отписаться о своем опыте использования этой связки....
, а также в настройках самого фильтра указать, что нужно добавить тег rel=lightbox:
и все, получаем готовый результат.)
Но у меня возникла проблема - есть все кроме стрелочек: вперед, назад.
Где что отредактировать или какие действия пропустил?)
Так же имеется дополнительное действие которое изменений не вызвыло но по инструкции вроде говорят надо:
Все манипуляции заняли около минуты.
прошу прощения за глупость выше..
в настройках есть пара оговорок:
будем искать решение, так как варианты закончились...., а стрелочки в Lightbox не появились....
?)
Посмотрите, что у вас выставлено в настройках Lightbox - /admin/settings/lightbox2/automatic,
там, где прописывается класс - группа Custom class images,
поле Automatic handler for custom class images.
Должно быть Lighbox grouped.
пробовал - результат всегда одинаковый....
Кеш отключен.
Чтобы картинки листались внутри lighbox, укажите атрибут не lightbox, а lightbox[roadtrip] в настройках фильтра.
Результат с Вашими скриншотами см. выше :)
Да и кстати....
В связи с вопросом про стрелочки пришлось-таки включить модуль image_resize_filter на viju :) (пост был написан по настройках на другом сайте) и вспомнить подробнее, что же там надо включать. Так вот одно замечание, по тому плану, который у вас получился:
- при использование image_resize_filter не обязательно включать automatic image handler в lightbox (я про него писала в варианте без фильтра)
- и соответственно в настройках фильтра класс lb тоже указывать не нужно
так как фильтр автоматически добавит ссылку с атрибутом rel, а этого для lightbox уже достаточно.
Все работает.....
причем просто превосходно.
Лучшей и более легкой, а главное многозадачной галереи не найти. За что спасибо Julia!)
для тех кто только начинает знакомится с Drupal с модулями: Lightbox2 и IMCE, можно ближе познакомится, причем на русском...
Интересное наблюдение...
часто в своих сообщениях я говорил о возможности дать пользователю способ очень комфортно управлять своими файлами...
собственно способ:
Получаем в результате:
Для дополнительного удовольствия можете попробовать добавить верхний уровень - "users". Чтоб все юзеры лежали рядом... Не забывайте - "чем глубже путь тем сложнее работа"
Что делает Transliteration понятно, но есть одно но:
Upload path умеет сам переименовывать файлы, по маске типа - "годмесяцденьвремя":
В результате у нас файл лежит точно там где нужно и с тем именем что нам нужно.
Тем кто, захочет сказать, что я набрал много модулей... Отвечу что емкие здесь:
А все остальное мелочь и главное что это избавляет нас от модулей:
Также меня радует тот факт что при переезде на новый Drupal мне нужно будет найти только инструменты обработки, так ка хранится это все в ядре... Что тоже облегчает жизнь!)
Спасибо за полезное добавление )
весьма актуально и полезно
И еще одно дополнение - еще один модуль filefield sources.
Это для тех случаев, когда картинки нужны именно как поля ноды (например для views)
но при этом хочется использовать IMCE и каталогизацию.
Модуль filefield sources позволяет выбирать картинку для поля с помощью IMCE (ну и не только).
настал счастливый момент...
пусть на почти готовом (проходит финальные тесты), но уже не пустом сайте есть галерея.)
За этот прекрасный функционал огромное спасибо этому дому и его хозяевам.
Интересно как реализовать єтот функционал на Drupal 7?
От меня в подгонке модулей к Drupal 7 толку мало, разве что как тестер...)))
Но при релизе говорили что в 7-ке реализована: "Обработка изображений теперь встроена в ядро и можно использовать стили для генерации изображений. К различным файлам может быть настроен как открытый, так и закрытый доступ.". я пока к семерке только пристреливаюсь и конечно отпишусь, но мне будет очень интересно услышать мнение Juli
Спасибо. Отличная статья.
У меня вопрос - по умолчанию я установил rel attribute: lightbox, Но на некоторых страницах (фотоальбом) хочу сделать группирование с возможностью листать картинки.
Подскажите, пожалуйста, как мне сие реализовать.
Методом слепого тыка (вставил в img атрибут rel="lightbox[roadtrip]") не помогло :(
Спасибо, действительно хорошо написано. Жаль даже, что сначала разобрался сам, а потом уже нашел этот текст :)
Вот какой вопрос по поводу описанной связки. Делаю сайт для знакомых, хотел им предложить механизм Image Resize Filter, т.к. более просто-наглядно. Однако им нужно, чтобы подпись для оригинала картинки, к-й открывается в Lightbox, могла задаваться независимо от подписи для миниатюры (которая выводится с помощью Image Caption Filter). На действующем сайте первая подпись берется из поля TITLE тега ссылки, а вторая ("миниатюрная") - из поля TITLE тега картинки. Соответственно, FCKeditor "допилен", и вставлены поля TITLE и REL для ссылки. Хочу поставить им CKeditor. И вот получается, что их все устраивает в Image Resize Filter, и установлено-работает нормально, и никаких изменений в код вносить не нужно, но (увы) настаивают, чтобы подписи можно было задавать независимо. А указать TITLE для ссылки, генерируемой "на лету" Image Resize Filter, не получится.
Может, у Вас есть какая-нибудь светлая идея? Был бы очень благодарен.
Спасибо огромное, очень хорошее описание =)
Отправить новый комментарий