Drupal 6
Кнопки для BuEditora для вставки картинок с подписями в Drupal
Я писала про добавление шаблонов в WISYWIG редактор TinyMCE в Drupal -
TinyMCE template плагин в Drupal,
чтобы можно было, вставляя картинку в текст, добавлять html код для выравнивания этой картинки по левой или правой стороне вместе с подписью к картинке.
Теперь коротко о том же самом - о добавлении кнопки для картинки, только для BuEditor.
В настройках BuEditora (/admin/settings/bueditor)
есть раздел Import Buttons, с помощью которого можно импортировать кнопки -
пример во вложении к этому сообщению.
Иконки для кнопок (файл во вложении) можно положить в любой каталог,
указав путь к нему в разделе Editor paths тамже в настройках Bueditora.
(CSS код и разметку см. в заметке TinyMCE template плагин в Drupal)
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
TinyMCE template плагин в Drupal
Очень часто возникает такая задачка, когда пользователям нужно дать возможность вставлять
некоторые готовые HTML сниппеты. Даже если пользователи знакомы с html - это довольно долго каждый раз писать HTML код вручную, тем более это неудобно при использовании WYSIWYG редактора,
такого как tinyMCE.
Для таких случаев в tinyMCE есть плагин templates (документация по нему тут http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template),
остается только подружить его с Drupal.
