Фотогаллерея, Textpattern, Lightbox и upm_image

Фотогаллерея в Textpattern — такая задача, которая в зависимости от требований может иметь различные решения. Одно из простых решений это плагин bas_lightbox, написанный Бастианом Закерманом.

Моё решение решение в отличии от bas_lightbox предоставляет весьма индивидуальное расположение превьюшек, а также имеет множество других положительных сторон:

• Одна статья на набор фотографий. Количество наборов ограничено максимальным количеством статей.
• Десятки фотографий в одной статье (длина поля Изображение к статье ограничена 255 символами, что соответственно накладывает некоторые ограничения).
• Всеми изображениями можно управлять средствами Textpattern не прибегая к дополнительным программам.
• Отображение фотографий происходит с помощью Slimbox (можно использовать любой другой подобный скрипт прим. переводчика). Даже при отключенном JavaScript происходит отображение фотографий, конечно не так красиво, как при использовании скрипта, но всё же.
• Список превьюшек с дополнительной информацией служит навигацией по галерее. Создаётся этот список с помощью upm_image. Upm_image использует Textpattern-форму, что позволяет оформить вывод так, как нравится вам.

Время шоу, народ!

Итак, первый шаг: Загрузите фотографии в Textpattern и дополните их превьюшками (уменьшенная картинка), подписями (заглавие) и альтернативным текстом.

Второе: Создайте статью и вставьте номера свежезагруженных картинок разделяя их запятыми в поле Изображение к статье. В этом вам очень поможет плагин upm_image_popper

Вернисаж

Upm_image использует список номеров изображений и выводит их в моём случае в виде неупорядоченного списка.

<txp:upm_article_image
	wraptag="ul"
	break="li" 
	form="bild"
	class="gallery"
/>

Этот тег вы можете вставить в статью или форму вывода статьи в том месте, где хотите чтобы появился список превяюшек.

Выставочный каталог

Если вы присмотритесь к тегу приведённому выше, то заметите, что используется атрибут form="bild". Форма bild определяет как будет выводиться каждая превьюшка в списке. Используя форму, вы можете легко настроить HTML-вывод тега upm_image подобно тегу txp:article. В нашем случае будет отображаться превьюшка и рядом описание данное этой картинке:

<a rel="lightbox[dings]"
	href="<txp:upm_img_full_url />"
	title="<txp:upm_img_alt escape="html" />"
>
	<img
		src="<txp:upm_img_thumb_url />"
		width="<txp:upm_img_thumb_width />" 
		height="<txp:upm_img_thumb_height />"
		alt="<txp:upm_img_alt escape="html" />"
	/>
</a>
<txp:upm_img_caption escape="no" />

Прим. переводчика я расположил атрибуты тегов каждый на своей строчке. На мой взгляд это облегчает понимание кода и не мешает его исполнению. Подсветка кода подглючивает из-за вложенных тегов.

В форме возможно использовать другие теги предоставляемые плагином upm_image. Эти теги позволяют выводить дополнительную информацию к выводимой картинке:

Откуда Lightbox узнает, что для него есть работа? Ориентируясь на атрибут rel="lightbox" собирает Lightbox все ссылки, относящиеся к соответствующим картинкам. Дополнив rel любым словом заключенным в квадратные скобки, мы создадим набор картинок (галлерею), внутри которого Lightbox сможет перелистывать картинки. В нашем случае все картинки одной статьи образуют один набор, у нас он называется dings. Это будет правильно работать в рамках показа одной статьи. Если вы хотите, чтобы объединение фотографий правильно работало при показе статей списком, понадобится какой-нибудь уникальный идентификатор. Хорошо подойдёт номер статьи. В этом случае тег ссылки будет выглядеть следующим образом: <a rel="lightbox[<txp:article_id />]"

Гаснет свет, прожекторы на сцену!

Lightbox 2.0 состоит из JavaScript и CSS-файла. Оригинальный вариант, написанный Локешем Дхакаром, реально жирноват (примерно 90 kB), поэтому я применяю Weightwatcher-варианты: Litebox от Тилера Муллигана или Slimbox от Кристофа Бейса. Все три варианта имеют схожую функциональность. JavaScript и CSS нужно выложить на сервер и прописать в заголовке страницы (хотя это дело вкуса, с тем же успехом можно вставить стили средствами Textpattern).

<head>
[...]
<link rel="stylesheet" href="/style/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>
</head>
<body">
[...]

Рамки и остекление

Чего-то не хватает? Ну, конечно, немного оформления для неупорядоченного списка не помешает.

ul.gallery { 
	list-style: none; 
	padding: 0;
	margin: 0;
}

ul.gallery li { 
	clear: both; 
	padding: 0; 
	margin: 0 0 2em 0;
}

ul.gallery li p { 
	padding: 0; 
	margin: 0;
}

ul.gallery li img { 
	float: left;
	margin: 0 1em 1em 0;
}

Перевод статьи Роберта Вецльмейра Bildergalerie mit Textpattern, Lightbox und upm_image