Как сделать простую фотогалерею и подписи под картинкой в превью

Неоднократно делал под Drupal7 простую фотогалерею типа "мозаика" на основе множественного поля типа Image + какой-нибудь js для увеличения превью (я пользуюсь, обычно, lightbox2, но есть и другие - colorbox, fancybox, Highslide и т.д.)

А тут понадобилось прикрутить подписи под каждой фотографией. Решение напрашивается простое и логичное. Сделать в шаблоне основной темы шаблон tpl для этого поля и в нем все необходимое реализовать.

Итак, порядок действий:

ЧАСТЬ I. Создание фотогалереи.

1. Создаем материал типа Фотогалерея - mysite.ru/admin/structure/types/add

    Заполняем поля:
- Имя: Фотогалерея
- Машинное имя: gallery
- Описание: Материал для создания фотогалерей
- Название поля заголовка: Название
- Настройки публикации: Опубликовано (остальное выключить)
- Настройки отображения: Показывать автора и дату публикации - выключить.
- Установки комментариев: Закрыто (если вам нужны комментарии ставим Открыто)
- Настройки меню: Зависит от того, сколько у вас будет фотогалерей на сайте. Если будет много и отображатся они будут через Views, то меню лучше все повыключать, а если 1-2-3, то можно оставить в том меню которое вы считаете нужным. По умолчанию чекбокс на "Главное меню" уже стоит.

Нажимаем кнопку "Сохранить и добавить поля"

2. Добавляем поле "Галерея"

Заполняем поля в форме:
Название поля (метка): Галерея
Машинное имя: field_gallery
Тип: Изображение
Элемент: Изображение

Нажимаем "Сохранить". Затем сразу же "Сохранить настройки поля"

3. Настраиваем параметры поля "Галерея"

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

Справочный текст: Это поле предназначено для загрузки фотографий в фотогалерею
(Опять же для бестолковых секретуток надо)

Изображение по умолчанию не нужно (по понятным соображениям - нет фоток-картинок, нет страницы)

Допустимые расширения: оставляем те, что есть по умолчанию - png, gif, jpg, jpeg

Каталог файлов: pictures/gallery
(Не надо захламлять корневую папку публичного каталога - это и без нашей помощи произойдет. Не забываем тут же не отходя от места сразу же на хостинге создать такую папку)

Максимальное разрешение изображения и Минимальное разрешение изображения: не ограничиваем
(хотя можно и ограничить - это на любителя и на прочие условия и усмотрения)

Показывать поле для ввода атрибута «alt»: включить (хотя и не обязательно)

Показывать поле для ввода атрибута «title»: включить (а вот это срого обязательно сделать - см. ниже)

Количество значений: Неограниченно

Остальные поля в форме не трогаем и оставляем по-умолчанию

Нажимаем кнопку "Сохранить настройки"

4. Готовим стиль изображения для отображения в фотогалерее

Переходим Конфигурация - Стили изображения - Добавить стиль (mysite.ru/admin/config/media/image-styles/add)

Название стиля: Галерея

Машинное имя: gallery_prev

Нажимаем кнопку "Создать новый стиль".

В появившемся окне выбираем эффект: Масштабирование и обрезка.
Это важно. Чтобы у вас фотогалерея не расползалась в "мозаике" и смотрелась ровно и аккуратно надо, что бы все превью были одинакового размера. А этот фильтр справляется с нужным нам действием лучше всего. Нажимаем кнопку "Добавить"

Ставим ширину и высоту картинки. Я чаще всего ставлю 200х150 или 150х100. Но возможны (естественно) и другие варианты.

Стиль изображения для превью (фильтр) готов.

5. Настриваем отображение фотогалереи.

Снова редактируем материал "Фотогалерея". Переходим на закладку "Управление отображением" mysite.ru/admin/structure/types/manage/gallery/display

Поле "Галерея" - метка: Скрытый

Справа от поля "Галерея" формат отображения: "Изображение | Оригинальное изображение *". Щелкаем по списку "Изображение" и выбираем "Lightbox2: lightbox: gallery_prev->original" или  "Lightbox2: lightshow: gallery_prev->original" если хотите, чтобы фотки сами крутились.

Нажимаем "Сохранить"

На этом настройки материала "Фотогалерея завершены". Осталось привести в порядок шаблон.

ЧАСТЬ II. Настройка шаблона (CSS + tpl)

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

1. Создаем и заполняем. 
Тут ничего особенного. Потому просто делаем. НО!  При заливке фотографий не забываем добавлять название - вспоминаем Ч.I.п.3  мы включили "Показывать поле для ввода атрибута «title»". Хотя это и не обязательно, но именно для этого мы и проделываем действия в части II.

2. Смотрим, что получилось. Фотогалерея работает, но картинки выстроились друг под другом "вертикально" и никаких подписей под ними нет.

3. Создаем шаблон.

В папке темы с шаблонами создаем фал с именем field--field-gallery.tpl.php (имя именно такое потому, что в материале "Фотогалерея" мы создали поле с машинным именем field_gallery - см. выше)

Содержимое примерно вот такое: