Build the Collection Template

Top  Previous  Next

 

The first step in creating a template is to enter the Collection Template. By defining this template first, it becomes easy and quick to test the result without having to generate large collections. Also we can use this template later to copy the content to the gallery template and the portfolio template. These templates then only need minor adjustments.

 

Open the tab sheet “Collection Template”.

 

_img195

Tip!

 

For a better view, you can maximize the Template Editor window.

 

The size of the header and footer can be changed by dragging it larger with the mouse.

 

_img269

 

It goes beyond the purpose of this manual to explain how HTML works. Yet a few comments based on the code in this template.

 

Collection Template Header

<html>

<head>

<title>Collection - %CollectionName</title>

<link rel=stylesheet href="%CSSFileName" type="text/css">

</head>

 

<body>

 

<center>

 

<table class="main" cellspacing="0" cellpadding="0">

<tr height="100">

   <td>

     <table width="100%">

       <tr>

         <td width="220" align="right">

           %PreviousPageExists

           <a href="%PreviousPageFileName"><img src="%Resource:back"></a>

           %/PreviousPageExists

         </td>

         <td align="center">

           <span class="title">%CollectionName</span><br>

           <span class="subtitle">%Images photo(s)</span><br>

           %ParentCollectionExists

           <a href="%ParentCollectionFileName">back to %ParentCollectionName</a>

           %/ParentCollectionExists

           %NotParentCollectionExists

             %GalleryExists

               <a href="%GalleryFileName">back to %GalleryName</a>

             %/GalleryExists

           %/NotParentCollectionExists          </td>

         <td width="220" align="left">

           %NextPageExists

           <a href="%NextPageFileName"><img src="%Resource:next"></a>

           %/NextPageExists

         </td>

       </tr>

     </table>

   </td>

</tr>

<tr>

   <td height="500" align="center">

     <table>

       <tr height="410">

         <td align="center">

           <table>

 

Depending if there is a next page or not a link will be added to the next page (same for the previous page). We use Template Conditionals to add this kind of behavior to the template: “%PreviousPageExists” and “%NextPageExists”. Dont forget to close the conditionals with “%/PreviousPageExists” and “%/NextPageExists”.

 

The hearts with the text “back” and “next” will be used as a link to the previous and next page (if any). This heart must appear only if a previous or next page exists. To create a graphic with a file from the resource list, you enter HTML code as you would for normal HTML pages: <img src=”.....”>. At the place where you would normally enter the URL-filename of the image file, you now enter the resource name. Right click at this position and select the correct resource from the content menu.

 

IDimager supports sub-collections within collections so it is always possible that there is a sub-collection in this collection. We need to add support for the sub-collections. IDimager will generate a thumbnail for the sub-collection and add a folder icon to it (which can be changed with any other resource). This means that if the visitor clicks this thumbnail, a new collection (the sub collection) will be opened. This sub-collection is also generated using the collection template. The visitor needs to be able to navigate back to the parent collection. This is where IDimager needs the template variable “%ParentCollectionName”. By placing a link within a template conditional will make this link only visible when it concerns a sub collection. And not for the main collection. The conditional for this is “%ParentCollectionExists” and the closing part “%/ParentCollectionExists”.

 

When the collection is generated as part of a gallery, or even an portfolio, it may be that we need to include support to return to the gallery from the collection page. This will require an additional link. That is why we use the template conditional “%GalleryExists” and “%/GalleryExists”. In this example I want to have a link to return to the parent collection from a sub-collection. But from the main collection I want to be able to return to the gallery (if any). That is why this block is within the template conditional “%NotParentCollectionExists”.

 

Collection Template Body

%<tr>

<td align="center">

   <a href="%FullImageHTMLFileName">

   <img border="0" src="%ThumbFileName" alt="%ImageDimension (%ImageFileSize)">

   </a>

</td>

%</tr>

 

Notice that the body part begins with %<tr> and not with just <tr> as HTML would do. This template conditional is used because IDimager will then decide at which moment it will need to create a new row. This may depend on the number of columns that is set at the general settings tab sheet.

 

Collection Template Footer

           </table>

         </td>

       </tr>

       <tr>                   

         <td align="center">

           <table>

             <tr>

               <td width="220">

                 &nbsp;

               </td>

               <td align="center">

                 <span class="text">%CollectionDescription</span>

               </td>

               <td width="220">

                 &nbsp;

               </td>

             </tr>

           </table>

         </td>

       </tr>

     </table>

   </td>

</tr>

<tr>

   <td>

     &nbsp;

   </td>

</tr>

</table>

 

</center>

</body>

</html>

 

The footer is kind of the same.

 

Once you have created your collection template, it is time for a first test. It is the easiest to create a new portfolio. Create a new collection and add a few (3 or 4) images to the collection. It is also recommended that you create a single sub-collection and add 1 or 2 photos to that also. Then open the main collection and publish it using the publish button from the main toolbar. After generating the pages, preview it in your browser.