3.3. Describing your Template: the PhotoAlbumTemplate tag

NeoTemplate files are broken down into three basic parts:

PhotoAlbumTemplate Tag which contains what will be displayed in the Select Template dialog in the Create Web Pages wizard.
Index Page Tag and its children which describe how the thumbnail index pages will appear.
Detail Page Tag and its children which describe how the photo detail pages will appear.

The very first thing in a NeoPhoto template file is an obligatory string required by XML which is:

<?xml version="1.0"?>

The next thing in the file must be a PhotoAlbumTemplate tag which contains the information that is displayed in the Select Template dialog in NeoPhoto. This is where you identify the name of the template, the creator, a link to the creators website, a preview image letting your users know what the web album will look like, a description of the album and any special instructions.

The text content area under the PhotoAlbumTemplate is displayed in the Template Information box. You may use HTML formatting to make the description more attractive and also to link to external content. It's a good idea to include a link to a sample album somewhere on the web where your users can get a better idea of how the generated album will look.

For the tutorial_simple template:

<PhotoAlbumTemplate Name="tutorial_simple" 
Creator="DTLink Software"
CreatorURL="http://www.dtlink.com" PreviewImage="sample_preview.jpg">
This template is a companion to the &lt;a
href="http://www.neophoto.com/documents/template_writers_guide"&gt;
Template Writers Guide &lt;/a&gt;. &lt;br&gt;
It is intended as tutorial material for those who would like to
create their own templates. &lt;br&gt; This sample demonstrates:
&lt;ul&gt;
&lt;li&gt; creating an index page of thumbnails.
&lt;li&gt; adding titles and descriptions to your photos.
&lt;li&gt; creating detail pages containing larger views of your photos.
&lt;li&gt; using HTML comments inside templates to keep track
what text is being generated where.
&lt;li&gt; linking back from photo detail pages to the thumbnail index.
&lt;/ul&gt;
It does not include any next/previous buttons or page indeces nor
does it contain any photo decorations. The intent is to provide
you with a straightforward example of how to create a basic
NeoPhoto template.&lt;br&gt;
To see what kind of HTML this template generates see the sample
&lt;a href="http://www.neophoto.com/template_samples/tutorial_simple"
&gt;tutorial_simple example album&lt;/a&gt;
...

Figure 3-4. PhotoAlbumTemplate

You will notice that all the HTML “<” and “>” characters are encoded per XML rules. This is why it's a good idea to use an XML editor to do all the encoding for you.

And this is how it looks in the Select Template dialog:

Figure 3-5. tutorial_simple Select Design dialog

See how we've added a link in the description. If your description is longer than the box, the scroll bar will appear allowing you to have longer descriptions and more information.

3.3.1. Creating the Preview Image

You should include a preview image with your Template. Probably the easiest way to do this is to just use NeoPhoto:

put together a sample photo album in NeoPhoto.
create web pages out of it using your newly created NeoPhoto Template file.
display it in a web browser using the “Show generated album in a web browser” button at the end of the create webpages wizard.
Leaving the browser up go back to NeoPhoto and select Photo->Screenshots->Capture Window.
Follow the instructions to capture the web browser window.
The screenshot will appear in your currently opened NeoPhoto album.
Double click on the screenshot in NeoPhoto to bring it up in the editing window.
Resize the shot down to a max width of 160 and a max height of 140. NeoPhoto will automatically keep the aspect ratio the same so the photo doesn't look squeezed or elongated.
Using the File->Save as menu item in the single photo view, save the resized screenshot out to the folder containing your template.
Make certain the PreviewImage= attribute in your template file refers to the right screenshot filename.