Html templates

Thumbnails can be created using the default generator or a template-based generator as described here. This page focuses on the template-based generator.

What is a template?

A template is a html file that will be used as a basis for each page of the thumbnail. If a thumbnail is made of 3 pages of shots, the template file will be used for page 1, used independently for page 2, and used independently for page 3.

While a template can be a regular html file, will tags, attributes and ll the usual stuff, placeholders should however be used as a way to tell AVS where shots are supposed to be placed, where navigation links should be added and so on.

The beauty of these placeholders is that they look like raw html content in the template, so a template file can be built and modified using a standard html editor (WYSIWYG or not), and they are instantiated at generation time. Because of that, shot properties like captions can be either completely absent from the template file, or can be there one or more times. In addition, AVS does not enforce constraints of any kind in the way you decorate placeholders with html tags. You can express yourself freely, just like you were creating a web site.

AVS comes with default templates. This provides users the benefits of templates without writing any. Advanced users can either tweak those templates, or add their own.

A compelling reason to use templates and to create your own is to show and share thumbnails that look completely different than mainstream photo thumbnails on the one hand, and remove any sign that the thumbnails were generated by a computer program on the other hand.

What does a template look like?

Here is what a standard html file might look like :

<body bgcolor="#FFFFFF">
<center>
<h1>page title</h1>
 <table border="0">
  <tr bgcolor=#EEEEEE>
   <td width="100" height="80"><img src= "shot1.jpg"><br>
   <center>caption for shot 1</center></td>
   <td width=200>Description of shot 1</td>
  </tr>
  <tr bgcolor=#DDDDDD>
   <td width="100" height="80"><img src= "shot2.jpg"><br>
   <center>caption for shot 2</center></td>
   <td>Description of shot 2</td>
  </tr>
  <tr bgcolor=#CCCCCC>
   <td width="100" height="80"><img src= "shot3.jpg"><br>
   <center>caption for shot 3</center></td>
   <td>Description of shot 3</td>
  </tr>
 </table>
<center>
</body>

And here is what it becomes when one or more placeholders are added to it :

<body bgcolor="#FFFFFF">
<center>
<h1>$(TITLE)</h1>
 <table border="0">
  $(BEGINSHOT)<tr bgcolor=#EEEEEE>
   <td width="$(SHOTWIDTH)" height="$(SHOTHEIGHT)">
   <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center></td>
   <td width=200>Description of shot $(INDEX)</td>
  </tr>$(ENDSHOT)
  $(BEGINSHOT)<tr bgcolor=#DDDDDD>
   <td width="$(SHOTWIDTH)" height="$(SHOTHEIGHT)">
   <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center></td>
   <td>Description of shot $(INDEX)</td>
  </tr>$(ENDSHOT)
  $(BEGINSHOT)<tr bgcolor=#CCCCCC>
   <td width="$(SHOTWIDTH)" height="$(SHOTHEIGHT)">
   <img src= "$(SHOTFILENAME)"><br><center>$(SHOTCAPTION)</center></td>
   <td>Description of shot $(INDEX)</td>
  </tr>$(ENDSHOT)
 </table>
<center>
</body>

As you can see, it's really that simple. It can be a little bit more complex however. While placeholders are most of time simple keywords, reflecting shot contexts and/or navigation links, they can also be full-fledged expressions and formulas aimed to generate conditional content and/or conditional formatting.

One more benefit of placeholders is that they can hold any value, not only the 3 first ones in the initial html file. For that reason, the same template file will be used to generate any page of the thumbnail. This allows thumbnails to have more than 3 shots without ever bothering their indexing and their labelling.

Default templates?

AVS comes with default templates. This provides users the benefits of templates without writing any. Advanced users can either tweak those templates, or add their own.

Default templates are located in the templates subfolder of the AVS application path. You need not worry about this however. Whenever you are creating a template-driven thumbnail, the html previewer will automatically open this folder and let you see all available templates. Of course, you can choose a template file from somewhere else as well.

Templates and web archives?

Templates are strictly independent to the fact that thumbnails are generated as html files or web archives. In other words, it's possible to create a web archive containing a template-driven thumbnail.

Files referenced in template files

As mentioned, template files are really regular html files. For that reason, they may reference external files that are either stored locally in the same folder or in a subfolder, and they can reference external files that are stored on the web. AVS manages all that for you without bothering.

Technically speaking, what AVS does is perform a file duplication in the destination folder where the thumbnail is created whenever the template file references locally stored files. This allows to bring pictures, css stylesheets and javascript source code right into the thumbnail folder, and have the resulting thumbnail display nicely.

In fact, AVS duplicates files referenced in the following html tags :

A css stylesheet, part of a <link href="..."> tag
A javascript source code, part of a <script language="javascript" src="..."> tag
A picture, part of a <img src="..."> tag

In case the thumbnail is created as a web archive, then files are embedded inside the archive, rather than being duplicated. It's really technical here. Users don't need to bother, and probably won't even notice.