В последнее время мне полюбился такой способ создания галереи на друпале. Основа рецепта: множественная подгрузка фото + PHP цикл в шаблоне + ContentFlow.

Внешний вид

админка

Следует пояснить, что говоря «полюбившаяся связка» я подразумеваю CCK + вывод в шаблоне + любая JS/jQuery галерея.

В данной статье используется ContentFlow, и это уже частный случай. Любая другая галерея выводится точно по такому-же алгоритму действий, просто для других галерей HTML-структура будет другой, ну и подключаемые файлы и методы инициализации будут отличаться.

Данная галерея (ContentFlow) работает **БЕЗ** jQuery. Это важно понимать с самого начала, но большинство современных галерей все-таки опираются на этот замечательный JS-фреймворк.

## Создаем тип материала галерея

Заходим на страницу управления полями этого типа материала:

admin/content/node-type/**photo**/fields - жирным выделен машинное название типа материала.

Создаем новое поле photos:

Друпал приписывает «filed_» получается «**field_photos**»

## Заходим в настройки этого поля.

Здесь указываем сколько фоток хотим подгружать в галерею, 1, 5, 10, (...), выбираем неограничено:

Все, теперь можно создать новую страницу с типом материала «фотогалерея» и забить ее тестовыми картинками.

## Вывод галереи

Алгоритм действий такой:

* создаем шаблон **node-photos.tpl.php** методом клонирования исходного шаблона node.tpl.php
* создаем набор правил ImageCache с названием **ic-gallery-thumb**
* внутри этого шаблона кроме полей которые нам достались от шаблона _node_ ставим PHP цикл
* подключаем скрипт и стили галереи

Тип материала у нас кастомный - называется **photos**, что должно помочь понять почему так называется шаблон. Данный шаблон темизирует все материалы типа photos (но темизирует не всю страницу, а только контентную часть). Шаблоны, темизирующие всю страницу целиком начинаются с "page", например **page.tpl.php** (стандартная страница) или **page-front.tpl.php** (главная страница).

## Создаем набор правил

(размер выбирайте какой нравится)

## Ставим цикл в шаблоне:

Этот цикл будет выводить необходимую HTML-структуру для работы ContentFlow.

Таким образом контейнер **flow** будет содержать все элементы будущей галереи.

Обращаем особо пристальное внимание на эту строку:




В этой строке нас интересует больше всего **ic-gallery-thumb**, что является нашим набором правил ImageCache.

_Примечание: в «машинном» названии наборов правил имейджкеша, я ставлю суффикс **ic-** который символизирует сокращение от **i**mage **c**ache и помогает мне не запутаться при большом количестве таких правил, шаблонов и вообще большой функциональности._

_При составлении УРЛ картинки для ImageCache важно понять в каком порядке идет название набора правил, и название самой папки_

## Подключаем ContentFlow

Скачиваем дистриб [отсюда](http://www.jacksasylum.eu/ContentFlow/download.php)

Распаковываем архив, и видим кроме исходников и рабочее демо!

Смотрим исходный код демо-странички и обнаруживаем что оно использует всего 2 файла:

* styles.css
* contentflow.js

которые лежат прямо в корне распакованной папки. Подключаем эти два файла в общий шаблон сайта.

## Запускаем галерею

После вывода HTML-структуры ставим блок инициализации галереи:

Если параметров недостаточно, дополнительные можно поискать в [доках](http://www.jacksasylum.eu/ContentFlow/docu.php)

Если нужно что-то делать по клику на центральную фотку, то вот этот блок кода нужно вставить в опции как один из параметров:

// клик на активном элементе
onclickActiveItem: function (cf) {
var url = $(".flow .active .url").text();
$('#galleryIMG').attr('src', url );

var caption = $(".flow .active .caption").html();
$(".dynCaption").html(caption);

return false;
}

Но это уже моя личная приписка, необходимая для выполнения конкретной задачи (открытие большой фотки сверху над галереей). И для нее тоже применяется правило ImageCache. Чтобы понять как работает эта часть кода, нужно [изучать jQuery](http://www.ozon.ru/context/detail/id/4234012/?partner=bmr) :) а это уже другая тема.

## Можно подключить другие скрипты

Вот списки альтернативных jQuery галерей, которые можно прикрутить к друпалу: [раз](http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-sol...), [два](http://www.webdesignshock.com/showcase/100-best-jquery-image-gallery-plu...)

Для вывода такой галереи можете использовать views, SQL запрос, либо цикл (как в этой статье) в шаблоне и вывести список, оттемизировав его как угодно.

## Заключение

Для галерей на сайтах заказчиков ИМХО это самый удобный вариант (может есть удобнее, но я по своему тугомыслию не допёр)