just photo

Drupal

Кнопки для BuEditora для вставки картинок с подписями в Drupal

Julia 20/04/2010

Я писала про добавление шаблонов в 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

Julia 20/04/2010
Настройки Image Resize фильтра

При оформлении статьей очень частно возникает необходимость вставки картинок внутри текста,
например с выравниванием по левой или по правой стороне, часто с подписями к этим картинкам,
как это реализовать в 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

Julia 19/04/2010

Очень часто возникает такая задачка, когда пользователям нужно дать возможность вставлять
некоторые готовые HTML сниппеты. Даже если пользователи знакомы с html - это довольно долго каждый раз писать HTML код вручную, тем более это неудобно при использовании WYSIWYG редактора,
такого как tinyMCE.
Для таких случаев в tinyMCE есть плагин templates (документация по нему тут http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template),
остается только подружить его с Drupal.

тэги:

Drupal. Оформление даты в виде листка календарика

Julia 11/04/2010

Если мы хотим вывести CCK поле типа 'дата' (модуль date) в виде календарика, как на иллюстрации, то для этого:

  1. Создаем поле, имя которого например просто 'date'.
  2. Добавляем в соответствующий node-[тип контента].tpl.php следующий код:
    <?php if (!empty($field_date[0]['value'])) {
     
    $date = strtotime($field_date[0]['value']); ?>
       
      <div class="field-field-newsdate">
        <div class="mon"><?php print format_date($date, 'custom', 'M'); ?></div>
        <div class="day"><?php print format_date($date, 'custom', 'j'); ?></div>
      </div>   
    <?php } ?>
  3. В css файл добавляем:

    .field-field-newsdate {
    background:url("images/cal.png") no-repeat scroll center top transparent;
    float:right;
    font-size:8px;
    height:30px;
    line-height:13px;
    text-align:center;
    width:29px;
    text-transform:uppercase;
    }
    .field-field-newsdate .mon {
    color:#FDFEE9;
    font-weight:bold;
    }

  4. Кладем картинку с фоном для календарика в каталог images.

    Подобрать фон для календарика можно здесь - Free Web 2.0 Calendar Icons

тэги:

Drupal 6. Разные виды списков для терминов из разных словарей

Julia 16/01/2010

Очень частно нужно выводить содержание разделов, которые относятся к разным словарям по разному.

Т.е. например, для термина из словаря Catalog нужно выводить только короткое содержание соответствующих нодов (node teasers), а для словаря Tags нужно выводить только заголовки,
или например, для Catalog нужно выводить ноды с картинками, а для Tags - без них.

При этом основная страница терминов в Drupal - taxonomy/term/[tid], и по умолчанию показываются в виде ссылок в конце нода.

тэги:

Drupal 6. Вывод списков в тексте, через запятую

Julia 06/10/2009

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

Ну например - сайт компании, есть страница с описанием услуг компании и в тексте нужно упомянуть партнеров этой компании, есть описание каждого партнера на отдельной странице, список должен формироваться автоматически.

тэги:

Drupal. Ссылка на перевод во view

Julia 25/09/2009

Вроде бы и простая задача - добавить ссылку или ссылки на переводы страницы в списке view,
а сразу и не догадаешься как это сделать во Views 2.
Так как такого поля как ссылка на перевод нет.
Самый простой вариант - показывать короткое содержание (Row style = teaser),
тогда можно включить опцию "показывать ссылки", а в ссылках есть ссылки на переводы.
А что если это не подходит, и список нужно выводить в виде набора полей.

тэги:

Drupal 6. Меню ориентированный сайт

Julia 13/09/2009
Sibling menu в блоке
Submenu в содержании
Hirarchical menu

Создавая сайт на друпал, можно использовать несколько механизмов
формирования главной структуры сайта. Основное - это таксономия и меню.
Однако для многих небольших сайтов таксономия может быть вообще не нужна.
Рассмотрим такой вариант и будет строить структуру сайта только на основе системы Меню.

тэги:

Gallerix: галерея для Drupal

Julia 21/06/2009
та самая галерея Gallerix, которую пришлось настраивать

Существует на сегодня довольно большое количество модулей для создания галереи на друпал,
в том числе и модули для интеграции сторонних галерей.

Gallerix - это довольно небольшая галерейка для создания фотоальбома, но, пожалуй, это ее единственное преимущество.

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

Тем не менее, по моему мнению, на сегодня лучший и наиболее гибкий способ создания галереи -
это использование полей CCK и views
filefield + imagefield + imagecache + views + lightbox2 (или thickbox)

тэги:

Feed API: Сбор RSS новостей на сайте

Julia 21/06/2009

Что такое модуль FeedAPI? Это агрегатор новостей, но в отличии от встроенного модуля Aggregator,
с FeedAPI новости и комментарии со сторонних сайтов могут быть конвертированы в ноды,
со всеми вытекающими отсюда приятными последствиями.

Если вы на сайте собираетесь показывать только одну чужую ленту,
то скорее всего вам будет достаточно встроенных возможностей друпал.
Но если вы хотите иметь больше возможностей, а главное использовать views для аггрегированных новостей, или например свои типы контента с CCK полями, придется поставить FeedAPI.

тэги: