ГлавнаяСтатьиФотогалерея для UMI.CMS любой редакции

Фотогалерея для UMI.CMS любой редакции

На wiki есть небольшая статья, в которой рассказывается как можно сделать фотогалерею используя протокол UFS. Но на мой взгляд в ней не расскрыта вся тема. Поэтому напишу про свой вариант решения этого вопроса.

Суть задачи следующая, для любой страницы на сайте (хотя вернее сказать для определенного типа данных, к которому будет относиться эта страница) иметь возможность добавить n-е количество картинок с эфектом FancyBox или Lytebox (или каким-то другим, это уже дело вкуса).

Покажу на примере типа данных "Страница контента". Создадим в блоке "Основные параметры [common]" ещё одно поле "Строка" и назовем её например "Путь к папке с картиками" -> "path_images". В это поле мы пропишем путь к папке с картинками которые у нас будут по плану в нашей фотогалерее и которые предварительно нужно загрузить через FTP или файловый менеджер.

В моём случае этот путь выглядит так: /images/auto .

И теперь для простоты вызова и обработки занесем этот путь в переменную, и заготовка для нашего щаблона будет выглядеть следующим образом:

<xsl:template match="/result[@pageId = '42']">

    <xsl:variable name="patch_images" select=".//propery[@name = 'path_images']/value" />

</xsl:template>

Здесь я привязал фотогалерею к старнице с определенным id, но по аналогии можно привязать этот шаблон и к определенному типу данных. И далее пропишем вызов шаблона с параметром, который будет обрабатывать наши картинки и выводить их на страницу.

<xsl:apply-templates select="document(concat('ufs://', $patch_images, '/'))/udata" mode="ufs">
    <xsl:with-param name="category_images" select="$patch_images" />
</xsl:apply-templates>

Теперь давайте напишем шаблон для обработки картинок. Выглядеть он будет следующим образом:

<xsl:template match="udata" mode="ufs">
    <xsl:param name="category_images" />
		
    <xsl:apply-templates select="file" mode="ufs">
        <xsl:with-param name="category_images" select="$category_images" />
    </xsl:apply-templates>
		
</xsl:template>
	

<xsl:template match="file" mode="ufs">
    <xsl:param name="category_images" />
    <xsl:variable name="photo" select="concat($category_images, '/', @name)" />
    
    <xsl:variable name="smallphoto" select="document(concat('udata://system/makeThumbnail/(.', $photo, ')/100/auto/notemplate/0/1'))//src" />
		
    <p class="item_photo">
        <a href="{$photo}" class="fancyLink" rel="gallery">
            <img src="{$smallphoto}" />
	</a>
    </p>
</xsl:template>

Осталось только немного допилить стили (я думаю это уже не столь важно), и фотогалерея готова. Работающий пример фотогалереи Вы можете наблюдать чуть ниже в конце статьи. Также вместо вызова макроса makeThumbnail можно использовать makeThumbnailFull.

Единственно, что в данном примере не очень удобно, это вывод всех картинок сразу на страницу. Поэтому как вариант, здесь можно посоветовать прикрутить немного обработки на javascript, и сделать разбивку на страницы, и выводить уже например по 15 фотографий (это как настроить). Кому интересно могут посмотреть например здесь. Еще как вариант можно прикрутить вызов шаблонов через AJAX, и в итоге получим фотогалерею а-ля картинки от google отдыхают . Но это уже отдельная тема для статьи, и может быть я про это тоже напишу.