Support Center

Gallery Templates

Last Updated: Dec 09, 2013 08:08PM UTC
Gallery templates use the <items> tag to define individual files in your gallery. It's also used as a container for all the different elements within your gallery list.

Basic Gallery Original Sized Image 

This gallery will use the native dimensions of your files because no specific dimension were set.

<items> 
     <img src="{url}" />
     <h2>{title}</h2>    
     {description}
</items>

Gallery Using Preview and Resize

Here we set the dimensions we want to use on the images.
(highlighted in yellow in the example below)

<items preview="450x450" resize="800x600"
     <a href="{url}" title="{title}"><img src="{preview_url}" /></a>
      <h5>{title}</h5>
      {description}
</items>

Tags


{url} - Defines a direct path to your file.
{title} - Uses title set in the Media Manager but has no formatting.
{description} - Uses description set in the Media Manager and uses formatting set in editor.
{preview} - A preview of file using native file dimensions, will contain native embed code.

{preview_url} - It's a direct path to a file where you can set dimensions also allows you to use the URL section in the Gallery Manager to link the file to a different page or website.
resize - 
Resize attribute will replace {url} variable with resized file.

Below is an example of a Morweb gallery template:

<div class="slides_container">
    <ul class="slides">
        <items>
            <li>
                <div class="bannerImage"><img src="{url}" /></div>
                <div class="caption">
                    <h2>{title}</h2>
                    {description} </div>
            </li>
        </items>
    </ul>
</div>

Below is an example of the gallery above as it would look on the source code of the page:

<div class="slides_container">
    <ul class="slides">
        <li>
            <div class="bannerImage"><img src="banner1.jpg"></div>
            <div class="caption">
                <h2>Did you know?</h2>
                <p>Bauris accumsan lectus vel diam gravida rutrum.</p>
            </div>
        </li>
        <li>
            <div class="bannerImage"><img src="banner2.jpg"></div>
            <div class="caption">
                <h2>There are more to...</h2>
                <p>Sed elementum sapien at tellus hendrerit.</p>
            </div>
        </li>
        <li>
            <div class="bannerImage"><img src="banner3.jpg"></div>
            <div class="caption">
                <h2>Content Management Systems</h2>
                <p>Lectus vel diam gravida rutrum. Sed elementum sapien.</p>
            </div>
        </li>
    </ul>
</div>


Notice that on the above example there are 3 different list items but on the actual Morweb template we only specified 1 list item. This is because everything inside the <items> tag gets added to each file in your gallery and in this case there are 3 files in the gallery.
086a070b05b2a57277ce3f708758d7a7@morwebcms.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete