3.2. Tutorial Simple NeoPhoto Template

In the Templates\tutorial_simple folder you will find a file called tutorial_simple.neotmpl. This is the actual NeoPhoto Template file containing the tags that instruct NeoPhoto how to build a “tutorial_simple” web gallery. It is heavily commented to help you figure out how the various tags in the NeoPhoto Template file correspond to the HTML that is generated.

To familiarize yourself with how this process works you should:

open a photo album that has an odd number of photos and create a web photo gallery out of it using the tutorial_simple template. We want you to use an odd number of photos so you can see how incomplete rows on the index page of an photo gallery are handled.
open the generated photo album and do a view->source to get an idea of what the generated HTML looks like.
use the XML editor you've chosen to open the tutorial_simple.neotmpl file and take a look at the tags and embedded HTML.
compare the contents of the tutorial_simple.neotmpl file to the HTML source the was generated to see how the comments in the template file line with the comments in the HTML source.

For the impatient, the NeoPhoto Template file., the generated HTML source and a screenshot are duplicated below.

<?xml version="1.0"?>
<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;
<IndexPage 
DefaultThumbWidth="175" 
DefaultThumbHeight="175" 
MaxRows="4">
   <Header>
      &lt;!-- You can include HTML comments in your templates
      along with any other normal HTML you might want to include.
      For tutorial purposes we have indented this file to make
      the source easier to read. For a "real" template you would
      not want to do this because including extra tabs and
      formatting confuses many browsers.
      Once you generate your web album using this theme these
      comments will give you a good idea of which tags generate
      which sections of HTML.
      Header tag under the IndexPage START. --&gt;
      &lt;HTML&gt;
      &lt;HEAD&gt;
      &lt;TITLE&gt;{GalleryTitle}&lt;/TITLE&gt;
      &lt;/HEAD&gt;
      &lt;body bgcolor="white"&gt;
      &lt;center&gt;
      &lt;table width="75%"&gt;
      &lt;tr&gt;
      &lt;td align="center"&gt;
      &lt;p&gt;This album was generated using the tutorial_simple
      template. It's intended to be a companion to the 
      &lt;a
      href="http://www.neophoto.com/template_writers_guide.html"
      target="_blank"&gt;template writers guide&lt;/a&gt;. 
      To demonstrate what text is embedded in the template and
      what text comes from the album, all text from the NeoPhoto
      album has been put in italics.  All thumbnails come from
      the album. The DTLink and NeoPhoto buttons come from the
      template.
      &lt;/p&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;br&gt;
      &lt;b&gt;&lt;i&gt;{GalleryTitle}&lt;/i&gt;&lt;/b&gt;
      &lt;p&gt;&lt;i&gt;{GalleryDescription}&lt;/i&gt;&lt;/p&gt;
      &lt;table width="100%"&gt;
      &lt;tr&gt;
      &lt;td colspan="2" align="center" valign="top"&gt;
      &lt;!-- this shows how you can include stock graphics in
      your templates. All graphics are referred to relatively and
      must be present in the template folder. NeoPhoto will just
      copy all the files in the template folder to the folder
      where the webpages are created. --&gt;
      &lt;a href="http://www.neophoto.com"
      target="_blank"&gt;&lt;img border="0"  
      src="neo.madewith.00.jpg"&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- Header tag under the IndexPage END --&gt;
   </Header>
   <ImageRow>
      <FixedContent>
         &lt;!-- you can included fixed content anywhere. Here we
         use the fixedcontent tag to start the row.FixedContent
         under ImageRow START--&gt;
         &lt;tr&gt;
         &lt;!--FixedContent under ImageRow END --&gt;
      </FixedContent>
      <Image>
         &lt;!-- NeoPhoto loops over the photos in the album. It
         takes the first photo, applies it to the first Image tag
         then applies the next photo to the next image tags until
         it runs out of tags. Once it runs out of Image tags
         under a given ImageRow it jumps to the next ImageRow and
         starts applying image tags there. Once it runs out of
         Image Rows it'll loop back to the first ImageRow and
         start over again. Note that the ImageThumbFileName,
         ThumbWidth and ThumbHeight variables will get replaced
         with the values from the photo album. Some variables
         only work under Image tags, other variables work
         everywhere. See the Template Writers Guide variable
         reference for more information. 
         first Image under ImageRow START --&gt;
         &lt;td align="center" valign="middle" width="50%"&gt;
         &lt;a href="{ImagePageFileName}"&gt;&lt;img border="0"
         src="{ImageThumbFileName}" width="{ThumbWidth}"
         height="{ThumbHeight}"&gt;&lt;/a&gt;
         &lt;font size="-1" color="#333333" face="Arial"&gt;
         &lt;br&gt;&lt;i&gt;{ImageTitle}&lt;/i&gt;&lt;br&gt;
         &lt;/td&gt;
         &lt;!-- first Image under ImageRow END --&gt;
         <FixedContent>
            &lt;!-- it's possible that NeoPhoto will run out of
            photos before it reaches the end of the imagerow. In
            that case it will look for a FixedContent tag under
            the Image tag and use the HTML it finds there
            instead. Think about the case where you have 4
            columns in a table and it's the last row and you only
            have 1 photo left. You may want to put something
            else in the remaining 3 columns. You use FixedContent
            in that case. However, since this is the first image
            in this image row we'll never actually ever use this
            FixedContent but we might end up using the
            FixedContent under the second image if we have an odd
            number of photos.
            FixedContent under first Image START --&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;!-- FixedContent under first Image END --&gt;
         </FixedContent>
      </Image>
      <Image>
         &lt;!-- Second Image under ImageRow START --&gt;
         &lt;td align="center" valign="middle"
         width="50%"&gt;
         &lt;a href="{ImagePageFileName}"&gt;&lt;img border="0"
         src="{ImageThumbFileName}" width="{ThumbWidth}"
         height="{ThumbHeight}"&gt;&lt;/a&gt;&lt;br&gt;
         &lt;font size="-1" color="#333333" face="Arial"&gt;
         &lt;i&gt;{ImageTitle}&lt;/i&gt;&lt;br&gt;
         &lt;/td&gt;
         &lt;!-- Second Image under ImageRow END --&gt;
         <FixedContent>
            &lt;!-- FixedContent under Second Image START --&gt;
            &lt;td align="center" valign="top"&gt;
            &lt;table width="75%"&gt;
            &lt;tr&gt;
            &lt;td align="center"&gt;
            &lt;a href="http://www.neophoto.com"
            target="_blank"&gt; &lt;img border="0"
            src="neo.madewith.00.jpg"&gt;&lt;/a&gt;&lt;br&gt;
            If NeoPhoto runs out of photos before completing a
            row, it will use the text content under the
            FixedContent tag. This will allows you to close
            tables, add placeholder cells, add optional graphics,
            etc
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/td&gt;
            &lt;!-- FixedContent under Second Image END --&gt;
         </FixedContent>
      </Image>
      <FixedContent>
         &lt;!-- This FixedContent tag is used to end the
         ImageRow and close the row.
 
         last FixedContent under ImageRow START --&gt;
         &lt;/tr&gt;
         &lt;!-- last FixedContent under ImageRow END --&gt;
      </FixedContent>
   </ImageRow>
   <Footer>
      &lt;!-- this is used to fill out the bottom of the page. 
      footer under indexPage START --&gt;
      &lt;tr&gt;
      &lt;td colspan="2" align="center" valign="bottom"&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;a href="http://www.dtlink.com"
      target="_blank"&gt;&lt;img border="0" 
      src="dtlink_logo.gif"&gt;&lt;/a&gt;
      &lt;br&gt;
      &lt;table width="75%"&gt;
      &lt;tr&gt;
      &lt;td align="center"&gt;
      For more information see the &lt;a
      href="http://www.neophoto.com/template_writers_guide.html" 
      target="_blank"&gt;The Template Writers Guide&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/body&gt;
      &lt;!-- footer under indexpage END --&gt;
   </Footer>
</IndexPage>
<PhotoDetailPage>
   <Image>
      &lt;!-- on the photo detail pages there can only be one
      image. There's no header or footer tags, just the Image
      tag. Image under PhotoDetailPage START --&gt;
      &lt;table width="100%"&gt;
      &lt;tr&gt;
      &lt;td align="center" valign="top"&gt;
      &lt;!-- this shows how you can include stock graphics in
      your templates. All graphics are referred to relatively and
      must be present in the template folder. NeoPhoto will just
      copy all the files in the template folder to the folder
      where the webpages are created. --&gt;
      &lt;a href="http://www.neophoto.com" 
      target="_blank"&gt;&lt;img border="0"
      src="neo.madewith.00.jpg"&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td align="center"&gt;
      &lt;a   href="{IndexPageFileName}"&gt;
      Back to Index&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td align="center" valign="center"&gt;
      &lt;br&gt;
      &lt;font size="-1" color="#333333"
      face="Arial"&gt;&lt;i&gt;{ImageTitle}&lt;/i&gt;&lt;br&gt;
      &lt;br&gt;
      &lt;img src="{ImageFileName}" width="{ImageWidth}"
      height="{ImageHeight}"&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td align="center" valign="center"&gt;
      &lt;p align="center"&gt;
      &lt;font size="-1" color="#333333"
      face="Arial"&gt;&lt;i&gt;{ImageCaption}&lt;/i&gt;
      &lt;/font&gt;
      &lt;p align="center"&gt;
      &lt;a   href="{IndexPageFileName}"&gt;
      Back to Index&lt;/a&gt;
      &lt;/p&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td colspan="2" align="center" valign="bottom"&gt;
      &lt;a href="http://www.dtlink.com"
      target="_blank"&gt;&lt;img border="0"
      src="dtlink_logo.gif"&gt;&lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;!-- Image under PhotoDetailPage END --&gt;
   </Image>
</PhotoDetailPage>
</PhotoAlbumTemplate>

Figure 3-1. tutorial_simple NeoTemplate file

Taking a simple 5 photo album and generating it in NeoPhoto using the NeoTemplate file above generates the following HTML file:

<!-- You can include HTML comments in your templates along with
any other normal HTML you might want to include.
For tutorial purposes we have indented this file to make the
source easier to read. For a "real" template you would
not want to do this because including extra tabs and formatting
confuses many browsers.
Once you generate your web album using this theme these comments
will give you a good idea of which tags generate which sections
of HTML.
Header tag under the IndexPage START. -->
<HTML>
<HEAD>
<TITLE>tutorial_simple example album</TITLE>
</HEAD>
<body bgcolor="white">
<center>
<table width="75%">
<tr>
<td align="center">
<p>This album was generated using the tutorial_simple template.
It's intended to be a companion to the <a
href="http://www.neophoto.com/template_writers_guide.html"
target="_blank">template writers guide</a>. To demonstrate what
text is embedded in the template and what text comes from the
album, all text from the NeoPhoto album has been put in italics. 
All thumbnails come from the album. The DTLink and NeoPhoto
buttons come from the template.
</p>
</td>
</tr>
</table>
<br>
<b><i>tutorial_simple example album</i></b>
<p><i>This is a example of the tutorial_simple template using a
few photos I had lying around.</i></p>
<table width="100%">
<tr>
<td colspan="2" align="center" valign="top">
<!-- this shows how you can include stock graphics in your
templates. All graphics are referred to relatively and must be
present in the template folder. NeoPhoto will just copy all the
files in the template folder to the folder where the webpages are
created. -->
<a href="http://www.neophoto.com" target="_blank"><img border="0"
src="neo.madewith.00.jpg"></a>
</td>
</tr>
<!-- Header tag under the IndexPage END -->
<!-- you can included fixed content anywhere. Here we use the
fixedcontent tag to start the row. 
FixedContent under ImageRow START-->
<tr>
<!--FixedContent under ImageRow END -->
<!-- NeoPhoto loops over the photos in the album. It takes the
first photo, applies it to the first Image tag then applies the
next photo to the next image tags until it runs out of tags. Once
it runs out of Image tags under a given ImageRow it jumps to the
next ImageRow and starts applying image tags there. Once it
runs out of Image Rows it'll loop back to the first ImageRow and
start over again.
Note that the ImageThumbFileName, ThumbWidth and ThumbHeight
variables will get replaced with the values from the photo album.
Some variables only work under Image tags, other variables work
everywhere. See the Template Writers Guide variable reference for
more information.
first Image under ImageRow START -->
<td align="center" valign="middle" width="50%">
<a href="highroller.html"><img border="0"
src="highroller-thumb.jpg" width="175"
height="117"></a>
<font size="-1" color="#333333" face="Arial"><br>
<i>Roller Coaster</i><br>
</td>
<!-- first Image under ImageRow END -->
        
<!-- Second Image under ImageRow START -->
<td align="center" valign="middle" width="50%"><a
href="dscf0048.html"><img border="0" src="dscf0048-thumb.jpg"
width="175" height="131"></a><br>
<font size="-1" color="#333333" face="Arial">
<i>Big Ship</i><br>
</td>
<!-- Second Image under ImageRow END -->
        
<!-- This FixedContent tag is used to end the ImageRow and close
the row.
last FixedContent under ImageRow START -->
</tr>
<!-- last FixedContent under ImageRow END -->
<!-- you can included fixed content anywhere. Here we use the
fixedcontent tag to start the row. 
FixedContent under ImageRow START-->
<tr>
<!--FixedContent under ImageRow END -->
<!-- NeoPhoto loops over the photos in the album. It takes the
first photo, applies it to the first Image tag then applies the
next photo to the next image tags until it runs out of tags. Once
it runs out of Image tags under a given ImageRow it jumps to the
next ImageRow and starts applying image tags there. Once it 
runs out of Image Rows it'll loop back to the first ImageRow and
start over again.
Note that the ImageThumbFileName, ThumbWidth and ThumbHeight
variables will get replaced with the values from the photo album.
Some variables only work under Image tags, other variables work
everywhere. See the Template Writers Guide variable reference for
more information.
first Image under ImageRow START -->
<td align="center" valign="middle" width="50%">
<a href="dscf0056.html"><img border="0" src="dscf0056-thumb.jpg"
width="175" height="131"></a>
<font size="-1" color="#333333" face="Arial"><br>
<i>Baltimore</i><br>
</td>
<!-- first Image under ImageRow END -->
        
<!-- Second Image under ImageRow START -->
<td align="center" valign="middle" width="50%">
<a href="DSCF0026.html"><img border="0" src="DSCF0026-thumb.jpg"
width="175" height="131"></a><br>
<font size="-1" color="#333333" face="Arial">
<i>A Dog named Abel.</i><br>
</td>
<!-- Second Image under ImageRow END -->
        
<!-- This FixedContent tag is used to end the ImageRow and close
the row.
last FixedContent under ImageRow START -->
</tr>
<!-- last FixedContent under ImageRow END -->
<!-- you can included fixed content anywhere. Here we use the
fixedcontent tag to start the row. 
FixedContent under ImageRow START-->
<tr>
<!--FixedContent under ImageRow END -->
<!-- NeoPhoto loops over the photos in the album. It takes the
first photo, applies it to the first Image tag then applies the
next photo to the next image tags until it runs out of tags. Once
it runs out of Image tags under a given ImageRow it jumps to the
next ImageRow and starts applying image tags there. Once it runs
out of Image Rows it'll loop back to the first ImageRow and start
over again.
Note that the ImageThumbFileName, ThumbWidth and ThumbHeight
variables will get replaced with the values from the photo album.
Some variables only work under Image tags, other variables work
everywhere. See the Template Writers Guide variable reference for
more information.
first Image under ImageRow START -->
<td align="center" valign="middle" width="50%">
<a href="dscf0032.html"><img border="0" src="dscf0032-thumb.jpg"
width="175" height="131"></a>
<font size="-1" color="#333333" face="Arial"><br>
<i>Sunset on Selby Bay</i><br>
</td>
<!-- first Image under ImageRow END -->
        
<!-- FixedContent under Second Image START -->
<td align="center" valign="top">
<table width="75%">
<tr>
<td align="center">
<a href="http://www.neophoto.com" target="_blank">
<img border="0" src="neo.madewith.00.jpg"></a><br>
If NeoPhoto runs out of photos before completing a row, it will
use the text content under the FixedContent tag. This will
allow you to close tables, add placeholder cells, add optional
graphics, etc
</td>
</tr>
</table>
</td>
<!-- FixedContent under Second Image END -->
        
<!-- This FixedContent tag is used to end the ImageRow and close
the row.
last FixedContent under ImageRow START -->
</tr>
<!-- last FixedContent under ImageRow END -->
<!-- this is used to fill out the bottom of the page. 
footer under indexPage START -->
<tr>
<td colspan="2" align="center" valign="bottom">
<br><br>
<a href="http://www.dtlink.com" target="_blank">
<img border="0" src="dtlink_logo.gif"></a>
<br>
<table width="75%">
<tr>
<td align="center">
For more information see the <a
href="http://www.neophoto.com/template_writers_guide.html" 
target="_blank">The Template Writers Guide</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!-- footer under indexpage END -->

Figure 3-2. Tutorial Simple HTML

There are a wealth of comments inside the tutorial_simple.neotmpl file. By comparing how the tags in the neotmpl file line up with the text generated in the resulting HTML file you will get a much better idea of how this works.

The resulting index page appears as follows:

Figure 3-3. Tutorial Simple Screenshot

The rest of this chapter will discuss the various tags in the tutorial_simple template. For a complete listing of all the tags, attributes and variables available in the NeoTemplate language please see the NeoTemplate Language Referencein Part 2.