Categories

Gallery Layout Settings

Template-help.com Team November 15, 2010
Rating: 4.5/5. From 2 votes.
Please wait...

Gallery layout settings should be set in tfile_gallery.xml file.

All settings of the given file can be edited through the convenient /admin part but if the user won’t want to use it, the description of the given settings is quoted below.

Example: There are two galleries, 8 pictures in each; this should be described in XML file as follows:

 
  <section name=”imagesData”>
    <category name=”FLOWERS” folderID=”1″>
        <image>
            <item name=”imageUrl”>1.jpg</item>
            <item name=”imageComment”><![CDATA[
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.
]]></item>
        </image>
        <image>
            <item name=”imageUrl”>2.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>3.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>4.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>5.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>6.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>7.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>8.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
    </category>
    <category name=”NATURE” folderID=”2″>
        <image>
            <item name=”imageUrl”>1.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>2.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>3.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>4.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>5.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>6.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>7.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
        <image>
            <item name=”imageUrl”>8.jpg</item>
            <item name=”imageComment”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta.</item>
        </image>
    </category>
 </section>
 

The other layout settings:

imageHeight – small pictures height
imageWidth – small pictures width
hSpace – horizontal space between small pictures
vSpace – vertical space between small pictures
openInBrowser– (true/ false)  – if true, then at click on zoom button, photo opens in browser, if false – in flash
commentPosition – (stretched, left, right) positioning of comments to photos (stretched – will occupy all big photo throughout width)
previewPosition (top, bottom, right, left) – gallery appearance setting, shows how big photo will be settled relatively to the small one
previewOffset – indent between big and small pictures
maxGalleriesAllowed – a maximum value of the categories
minImageWidth – a minimum width of the image
minImageHeight – a minimum height of the image
maxImageWidth – a maximum width of the image
maxImageHeight – a maximum height of the image
minPreviewWidth – a minimum width of the preview
minPreviewHeight – a minimum height of the preview
maxPreviewWidth – a maximum width of the preview
maxPreviewHeight – a maximum height of the preview

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket