Build the Image Template

Top  Previous  Next

 

The Image template is most often a direct derivative of the collection template. However, where the collection template shows the thumbnails, the image template will need to show the full photo.

 

Copy the header and footer from the collection template to the header and footer of the image template.

 

Still we need to do some minor adjustments. We will need to create a link to return to the collection.

 

Image template Header

<html>

<head>

<title>Photo - %ImageName</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">%ImageName</span><br>

           <span class="subtitle">photo %ImageNumber of %Images</span><br>

           <a href="%CollectionFileName">back to %CollectionName</a>

         </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>

 

The most important modifications are highlighted.

 

The body of the image template will completely differ from the collection template:

 

Image template Body

<tr>

<td align="center">

   <table>

     <tr>

       <td align="center">

         <img border="0" src="%ImageFileName" alt="%ImagePhotoDate">

       </td>

     </tr>

     <tr>

       <td align="center">

         <span class="subtitle">%ImageDescription</span>

       </td>

     </tr>

   </table>

</td>

</tr>

 

Notice the different template variables used.

 

Image template Footer

     </table>

   </td>

</tr>

<tr>

   <td>

     &nbsp;

   </td>

</tr>

</table>

 

</center>

</body>

</html>