Knowledgebase: Design Templates
Gallery Builder Templates (XSL)
Posted by - NA -, Last modified by Mark [Elevated X Support] on 22 April 2015 01:11 PM

Note: This is for the deprecated XSL template system.  For version 3.2 of our software, check out the article:

Gallery Builder Templates (Smarty)

 

Gallery Builder Templates (XSL)

Please follow the example files located in your xsl/xsl0/gallerybuilder folder.

Using the included default templates as a guide you will need to edit the HTML of your own template files to include the code from the photos and/or videos xsl files. You’ll need to save your template using the extension .xsl

IMPORTANT –
The images folder must be named the same as the template so photos.xsl has a folder named photos. A template named blue_15pics.xsl would have a folder named /blue_15pics

Join Link Code Tags:

This tag will append the join URL you enter in the admin panel for this template. If you prefer not to have the system populate these tags you can hard code your join links into the templates.

<a href="{/root/template/JoinURL}"></a>

For each spot in the template you want a photo thumbnail to appear, use the following tag set.

<xsl:call-template name="showitem">
<xsl:with-param name="item" select="/root/content/item[@type='image'][1]" />
</xsl:call-template>

The [1] refers to the location of the photo in the template. When you edit a template in the cms admin panel, Location 1 corresponds to this location. Each spot must be defined with a number that corresponds to its Location in the template as defined in admin. For example if you have a gallery with 10 photos, you would have 10 instances of the tag set above, with the brackets ranging from [1] to [10].

The same is done for movies, however, type=’image’ should be changed to type=’movie’ as in the following example:

<xsl:call-template name="showitem">
<xsl:with-param name="item" select="/root/content/item[@type='movie'][1]" />
</xsl:call-template>

Towards the bottom of the template code you’ll see the following:

<a href=".{$item/files/file[@name='jpg']}">
<img style="border-color:#ffffff;" border="1" src=".{$item/files/file[@name='thumb']}" />
</a>

This controls the look of the thumbnail/video screen-cap images. You can edit the style of this as needed to change the border colors or add rollover effects, etc. but keep in mind that the code must be 100% complaint XHTML in order for the gallery builder to function without errors.

(5 vote(s))
Helpful
Not helpful

Comments (0)