Как сделать галерею в Textpattern


При создании любого сайта Textpattern рано или поздно встаёт вопрос, как сделать галерею на Textpattern!

На самом деле всё очень просто...

Для начала нужно скачать и установить один из наших любимых плагинов для Textpattern - smd_gallery.

Как мы уже о нём писали - этот плагин может быть очень гибко настроен на вывод изображений с нашего сайта. Ещё нам понадобится скачать и установить плагин asy_wondertag, о котором мы так же писали ранее.

Допустим, мы хотим выводить галерею в каких-нибудь статьях на сайте.

  1. Нам нужно создать эту статью - можно и пустую (только не забудте написать её Загололовок). Узнать номер (ID) нашей новой статьи. Сделать это можно найдя статью в Содержание -> Написанное.
  2. Переходим в Содержание -> Картинки и создаём категорию изображений с названием ID-шника нашей статьи (например наша статья сохранилась с номером 5, значит и категория изображений будет называться "5").
  3. Загружаем картинки и каждой устанавливаем категорию 5
  4. создаём уменьшенное изображение для каждой картинки

Теперь нужно подготовить наш сайт для вывода галереи. Лично мне очень нравится своей простотой вывод галереи в модальном окне с помощью jQuery галереи - fancybox (http://www.fancybox.net/).

Подключите скрипт и css к нему в нужном месте своей страницы (обычно между тегами <head>):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript">

$(document).ready(function() {
$(".fancybox").fancybox({
'hideOnContentClick': true,
'overlayShow': true,
'scrolling' : 'no',
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle,
autoScale : false,
});

});

Дале создайте форму "gallery" и вставьте в неё код:

<a href="{url}" rel="gallery" title="{caption}" target="_blank"><img src="{thumburl}" alt="{caption}" title="{caption}" /></a> 

А в форме вывода статьи вставьте:

<txp:asy_wondertag><txp:smd_gallery category="<txp:article_id />" form="gallery" sort="id" /></txp:asy_wondertag>

Теперь при вывод статьи, плагин smd_gallery будет искать картинки в категории с таким же названием, как и ID у нашей статьи. Найдя их, плагин выведет каждую по шаблону в форме gallery.

Меняя этот шаблон можно подключить любую галерею на сайт.

Автоматически загрузить, изменить размер фото и создать уменьшенное изображение поможет наш плагин - ku_image_uploader