Categories

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Featured templates

Gallery Layout Settings

Template-help.com Team November 15, 2010
Rating: 4.0/5. From 3 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