<!--#include file=b_cont -->
$(cpicName) Help - Creating Web Page Themes
<!--#include file=b_cont2 -->
<!--#include file=b_sec -->
What are Themes?
<!--#include file=e_sec -->
A web page theme in <variable name=cpicName></variable> can best be thought
of as a <b><i>style</i></b>.  A theme specifies the general layout, look, and feel
of pages created by the Web Page Generator.
<p>
Themes can be easily created with any text editor.  They use standard HTML
that is familiar to anyone who has built a web page, with special tags embedded
in the page that assist <variable name=cpicName></variable> in structuring the 
page.
<p>
Themes are generally stored in the <variable name=cpicName></variable> 'web' directory.
Each theme is usually saved in it's own directory, so that any supporting files (such 
as graphics) are kept together with the theme files.  
<p>
The information below provides a detailed look at how to create web page themes
for <variable name=cpicName></variable>.
</font><p>
<!--#include file=b_sec -->
Theory of Operation
<!--#include file=e_sec -->
The Web Page Generator in <variable name=cpicName></variable> has almost unlimited flexibility because
of it's design.  Theme files determine the entire layout and content of
the web pages, with few exceptions.  This amazing flexibility is accomplished
allowing an unlimited number of variables to be defined in each theme.  
<p>
Each variable
has a standard type and is grouped into sets which are determined by the user
at runtime.   Variables which are specified to be configurable (by using the 
familiar HTML 'input' tag), are presented to the user in the Web Page Generator
as options.
<p>
 As the theme is loaded, special HTML tags ("&lt;thumbnail...&gt;",
"&lt;replicate...&gt;") are evaluated in sections first, and
their contents are logically iterated and removed based on their contents.
As sections are identified, variables are replaced and conditional sections
("&lt;#if ...&gt;", "&lt;#else&gt;", and "&lt;#endif&gt;") are processed.
<p>
Reserved variable names are used to maintain information about variables
which are based on the set of images chosen, the current image and the
structure imposed by the process of creating iterative web pages from
themes.  For example, the current image number and current page number
both change for each image page and thumbnail page emitted, so these
variables must be maintained by <variable name=cpicName></variable> during the process.  All other
information (the only user changeable options) are derived from the
&lt;photodex_theme&gt; section.
</font><p>
<!--#include file=b_sec -->
Theme Definition
<!--#include file=e_sec -->
Every <variable name=cpicName></variable> web page theme file must contain a &lt;photodex_theme&gt;
section, started with a starting theme tag ("&lt;photodex_theme") and a
terminator ("&lt;/photodex_theme&gt;").  Everything within these tags including
these tags is omitted in the final output.  
<p>
The &lt;photodex_theme&gt; tag itself must contain the type of theme
("type=thumbnail" or "type=image") and the name of the theme to be
presented to the user in the user interface (title="&lt;theme title&gt;").
<p>
The simplest theme section is as follows:
<p>
<blockquote>
&lt;photodex_theme title="Sample Theme" type=thumbnail&gt;<br>
&lt;/photodex_theme&gt;
</blockquote>
<p>
Two themes are possible for thumbnail web page generation.  The first is
the theme used for creation of the thumbnail pages ("type=thumbnail").
The second is optional, and is used to create the web pages for each image.
If the image page theme is not specified, then links to the actual images
are used instead (the variable {{imagePageURL}} is the same as {{imageURL}}.)
<p>
Variable group definitions are specified within the photodex_theme section.
There is no limit to the number of groups or variables, but each group is
intended to be able to fit in the user interface.  Variables are defined in
groups designed to be presented to the user in the user interface as one
related group of options.  Each variable group is defined using the following
syntax:
<p>
<blockquote>
&lt;group title="group title"&gt;<br>
	[variable list...]<br>
&lt;/group&gt;<br>
</blockquote>
<p>
The title is a string which is appended to either "Thumbnail Page" or "Image
Page" in the user interface, usually a combo-box.  A sample of the options
in a combo-box in a user interface might look like is below.  

The first
option, "Themes", is there to allow the user to choose which
themes and global options they want, the second "Output Options" allows
the user to specify where files are saved.  These two option categories
are always present and are added automatically.
<p>
<blockquote>
   Themes<br>
   Output Options<br>
   &nbsp;&nbsp;Headings  (Thumb Pages)<br>
   &nbsp;&nbsp;Home Link  (Thumb Pages)<br>
   &nbsp;&nbsp;Navigation  (Thumb Pages)<br>
   &nbsp;&nbsp;Background  (Thumb Pages)<br>
   &nbsp;&nbsp;Thumbnails  (Thumb Pages)<br>
      &nbsp;&nbsp; &nbsp;&nbsp;Headings  (Image Pages)<br>
      &nbsp;&nbsp; &nbsp;&nbsp;Home Link  (Image Pages)<br>
      &nbsp;&nbsp; &nbsp;&nbsp;Navigation  (Image Pages)<br>
      &nbsp;&nbsp; &nbsp;&nbsp;Background  (Image Pages)<br>
</blockquote>
<p>
The "[variable list...]" is set of specialized HTML code which not only
defines the variables which can be adjusted, but also lays out the interface
for the user to change these variables.  The variables are defined by using
a variation of standard HTML form tags.  For example:
<p>
<blockquote>
&lt;input type=color name=optBackgroundColor alt="Color for the background" value=ffffff&gt;
</blockquote>
<p>
This will not only define a variable called 'optBackgroundColor,' and default
it to white (default color values are specified in HTML hex values), but will
also place a standard <variable name=cpicName></variable> <a href="h_cpickr.htm">color picker</a> in the interface.
<p>
The variable name can be anything except spaces and punctuation, except that
the first character must not be a number.  The type is always one of the
following:
<p>
<blockquote>
   file - file specification<br>
   checkbox - checkbox (either "0" or "1")<br>
   color - color picker (represented with hex color)<br>
   text - single line text<br>
   radio - radio button (either "0" or "1")<br>
   scroll - scrollbar (like value, approx. +/- 2^31)<br>
   textarea - free-form text (can contain newlines)<br>
   value - numeric value (approx. +/- 2^31)<br>
</blockquote>
<p>
A simple single line heading text definition with a blank default value would
look like this:
<p>
<blockquote>
   &lt;input type=text name=pageHeading value="My Default Heading"&gt;
</blockquote>
<p>
A simple checkbox which defaults to "on" would look like this:
<p>
<blockquote>
   &lt;input type=checkbox name=includeSection default=1 value="Include this"&gt;
 </blockquote>
 <p> 
For checkboxes and radio buttons, the text specified in the 'value' attribute
will be the text which appears next to the checkbox or radio button.
<p>
For scrollbars and values, the minimum and maximum value must be specified.
For example, we could specify a variable called "thisVariable" which has a
default value of 12, and can be between 1 and 25:
<p>
<blockquote>
   &lt;input type=value name=thisValue value=12 min=1 max=25&gt;
 </blockquote>
<p>
Or similarly, a scrollbar with a default value of 50 which can be between
10 and 100 would be specified as follows:
<p>
<blockquote>
   &lt;input type=scroll name=thisValue value=50 min=10 max=100 width=200&gt;
</blockquote>
<p>
For radio buttons, the variable name must end in a colon {':') followed by
a single letter which is used to determine which group of radio buttons it is
associated with (for example, "sampleObject:a" and "anotherSample:b" would be
in two separate radio button groups because of the ':a' and ':b' after their
names.)  Here is an example of a group definition with five radio buttons in
two groups:
<p>
<blockquote>
   &lt;group title="Radio Example"&gt;<br>
   	&lt;input type=radio name=radioButtonA:a value="Radio Button A" default=1&gt;<br>
   	&lt;input type=radio name=radioButtonB:a value="Radio Button B" default=0&gt;<br>
   	&lt;input type=radio name=radioButtonC:a value="Radio Button C" default=0&gt;<br>
   	&lt;input type=radio name=radioButtonD:a value="Radio Button D" default=0&gt;<br>
   	<br>
   	&lt;input type=radio name=radioButtonE:b value="Radio Button A" default=1&gt;<br>
   	&lt;input type=radio name=radioButtonF:b value="Radio Button A" default=0&gt;<br>
   &lt;/group&gt;<br>
</blockquote>
<p>
Make sure to have one (and only one) of each radio button group defaulting to
"1", with the rest of the radio buttons in that group defaulting to "0".  If
you fail to do this, the default condition of your user interface will be
confusing and unprofessional.
<p>
Inside the &lt;group&gt; tags, you can use standard HTML to control the placement
of the input objects in the user interface.  For example:
<p>
<blockquote>
   &lt;group title="Radio Example"&gt;<br>
       &lt;center&gt;<br>
	&lt;table border=0 cellspacing=0 cellpadding=5&gt;<br>
	&lt;tr&gt;<br>
	  &lt;td&gt;<br>
   	    &lt;input type=radio name=radioButtonA:a value="Radio Button A" default=1&gt;<br>
   	    &lt;input type=radio name=radioButtonB:a value="Radio Button B" default=0&gt;<br>
   	    &lt;input type=radio name=radioButtonC:a value="Radio Button C" default=0&gt;<br>
   	    &lt;input type=radio name=radioButtonD:a value="Radio Button D" default=0&gt;<br>
   	  &lt;/td&gt;<br>
   	  &lt;td&gt;<br>
   	    &lt;input type=radio name=radioButtonE:b value="Radio Button A" default=1&gt;<br>
   	    &lt;input type=radio name=radioButtonF:b value="Radio Button A" default=0&gt;<br>
   	  &lt;/td&gt;<br>
   	&lt;/tr&gt;<br>
   	&lt;/table&gt;<br>
       &lt;/center&gt;<br>
   &lt;/group&gt;<br>
</blockquote>
<p>
Available themes are listed by their title only, and not their file name.
When the user wants to use a theme file which is not listed, the user can
browse the file system to find the theme file.  Thumbnail web page
themes are usually stored with the extension ".ttp" and image web page
themes are stored with the extension ".itp" to make the process of finding
these files easier, although the names of the files does not matter.
(<variable name=cpicName></variable> tests whether or not a given theme file is valid by checking for
a valid &lt;photodex_theme&gt; section containing all of the necessary
components.)  Once <variable name=cpicName></variable> loads a valid theme file at the users request,
it is added to the list of known theme files, which is stored in
"./web/template.lst" off of the <variable name=cpicName></variable> installation directory.  If <variable name=cpicName></variable>
ever tries to load a theme file which is not valid, that theme is
removed from the list of known themes automatically.
<p>
When <variable name=cpicName></variable> looks for the "template.lst" file, it first looks in <variable name=cpicName></variable>'s
default data directory.  If the file is not there, then it looks in "./web".
<variable name=cpicName></variable> always writes new "template.lst" files to the data directory.  This
is necessary because <variable name=cpicName></variable> can run from a read-only device, so it will be
unable to write to the device to update the "template.lst" file.
<p>
The entire &lt;photodex_theme&gt; section is removed for final output.
</font><p>
<!--#include file=b_sec -->
Reserved Variable Names
<!--#include file=e_sec -->
Many macros are maintained by <variable name=cpicName></variable> and cannot be modified using the
theme definitions.  If you try to use these names for dynamically specified
variables in the &lt;photodex_theme&gt; section, they will not work.  All of
these reserved variables are replaced in the theme with plain text
representing their contents.
<p>
<ul>
<li><b>{{currentImage}}</b> - 1 or 0 depending on whether or not <b>{{imageNum}}</b> and <b>{{imageNum0}}</b> refer to the current image.
<li><b>{{currentPage}}</b> - 1 or 0 depending on whether or not <b>{{pageNum}}</b> and <b>{{pageNum0}}</b> refer to the current page.
<li><b>{{firstImage}}</b> - 1 or 0 depending on whether or not the current image is the first image.
<li><b>{{firstImageURL}}</b> - URL of first image.
<li><b>{{firstImagePageURL}}</b> - URL of first image page.
<li><b>{{firstInRange}}</b> - 1 or 0 depending on if the current image or page is the first replicated iteration.
<li><b>{{firstPage}}</b> - 1 or 0 depending on whether or not the current page is the first page.
<li><b>{{firstPageURL}}</b> - URL of first thumbnail page.
<li><b>{{imageAMPM}}</b> - 'am' or 'pm' of image time.
<li><b>{{imageExt}}</b> - File extension of current image.
<li><b>{{imageBitDepth}}</b> - Bit depth of current image.
<li><b>{{imageColors}}</b> - Number of colors in current image.
<li><b>{{imageDate}}</b> - Image date: "mm/dd/yyyy"
<li><b>{{imageDateLong}}</b> - Image date: "Month dd, yyyy"
<li><b>{{imageDateLong2}}</b> - Image date: "Mon. dd, yyyy"
<li><b>{{imageDayNum}}</b> - Image day of the month.
<li><b>{{imageFormat}}</b> - File format of current image (GIF, JPEG, etc.)
<li><b>{{imageHeight}}</b> - Vertical resolution of current image. (Same as imageVertRes.)
<li><b>{{imageHorzRes}}</b> - Horizontal resolution of current image. (Same as imageWidth.)
<li><b>{{imageHours}}</b> - Hour of image date (0-11).
<li><b>{{imageHours24}}</b> - Hour of image date in (0-23).
<li><b>{{imageMinutes}}</b> - Minute of image date (two digits).
<li><b>{{imageMonth}}</b> - Image date month (long form).
<li><b>{{imageMonth2}}</b> - Image date month (three characters).
<li><b>{{imageMonthNum}}</b> - Image date month.
<li><b>{{imageName}}</b> - Name of current image.
<li><b>{{imageNum}}</b> - Current image number (starting at 1).
<li><b>{{imageNum0}}</b> - Current image number (starting at 0).
<li><b>{{imagePageURL}}</b> - Current image URL.
<li><b>{{images}}</b> - Total number of images.
<li><b>{{imageSeconds}}</b> - Second of image date (two digits).
<li><b>{{imageSize}}</b> - File size of current image.
<li><b>{{imageSizeComma}}</b> - File size of current image with commas.
<li><b>{{imageSizeK}}</b> - File size of current in K (1024 bytes).
<li><b>{{imageSizeKComma}}</b> - File size of current in K (1024 bytes) with commas.
<li><b>{{imageSizeMB}}</b> - File size of current in MB (megabytes, 1048576 bytes).
<li><b>{{imageSizeMBComma}}</b> - File size of current in MB (megabytes, 1048576 bytes) with commas.
<li><b>{{imageURL}}</b> - URL of current image file.
<li><b>{{imageValid}}</b> - 1 or 0 depending on if the next image used with a &lt;thumbnail&gt; tag is valid.
<li><b>{{imageWidth}}</b> - Horizontal resolution of current image. (Same as imageHorzRes.)
<li><b>{{imageVertRes}}</b> - Vertical resolution of current image. (Same as imageHeight.)
<li><b>{{imageYear}}</b> - Image year.
<li><b>{{lastImage}}</b> - 1 or 0 depending on whether or not the current image is the last image.
<li><b>{{lastImageURL}}</b> - URL of last image.
<li><b>{{lastImagePageURL}}</b> - URL of last image page.
<li><b>{{lastInRange}}</b> - 1 or 0 depending on if the current image or page is the last replicated iteration.
<li><b>{{lastPage}}</b> - 1 or 0 depending on whether or not the current page is the last page.
<li><b>{{lastPageURL}}</b> - URL of last thumbnail page.
<li><b>{{nextImageURL}}</b> - URL of next image.
<li><b>{{nextImagePageURL}}</b> - URL of next image page.
<li><b>{{nextPageURL}}</b> - URL of next thumbnail page.
<li><b>{{pageNum}}</b> - Current page number.
<li><b>{{pageNum0}}</b> - Current page number.
<li><b>{{pages}}</b> - Total number of pages.
<li><b>{{pageURL}}</b> - Current page URL.
<li><b>{{prevImageURL}}</b> - URL of previous image.
<li><b>{{prevImagePageURL}}</b> - URL of previous image page.
<li><b>{{prevPageURL}}</b> - URL of previous thumbnail page.
<li><b>{{thumbHeight}}</b> - Height of current thumbnail image (actual generated size, not necessarily frame size given in &lt;thumbnail&gt; tag).
<li><b>{{thumbWidth}}</b> - Width of current thumbnail image (actual generated size, not necessarily frame size given in &lt;thumbnail&gt; tag).
<li><b>{{thumbURL}}</b> - URL of current thumbnail file.
</ul>
</font><p>
<!--#include file=b_sec -->
Using Variables.
<!--#include file=e_sec -->
Since variables are treated like text when the final output is generated, you can include a variable
name anywhere you would include standard HTML or text.
<p>
Variable names are always surrounded by double braces {{ }} when they are intended to be
translated.
<p>
For example to use the variable <i>optBackgroundColor</i> as the background color in a
body tag:
<p>
	<blockquote>
		&lt;body bgcolor={{optBackgroundColor}}&lt;
	</blockquote>
<p>
In another example, to include the contents of a variable called <i>pageHeading</i>, making them bold,
and specifying the font:
<p>
	<blockquote>
	&lt;font face="Arial" size="-1"&gt;<br>
	&lt;b&gt;{{pageHeading}}&lt;/b&gt;<br>
	&lt;/font&gt;<br>
	</blockquote>
</p>
</font><p>
<!--#include file=b_sec -->
Conditionals
<!--#include file=e_sec -->
The tags "&lt;#if ...&gt;", "&lt;#else&gt;", and "&lt;#endif&gt;" are used for conditional
inclusion of sections of HTML.  The "&lt;#if ...&gt;" tag is designed to be used
with any variable (reserved or dynamic) which resolves to a "true" or "false".  If
an "&lt;#if ...&gt;" tag is used with a variable which resolves to text, then the
evaluation is true if the text is not blank and not "false".
<p>
Here is an example of using conditionals to emit a hyperlinked thumbnail only
if the image associated with it is valid, and explanatory text if the image is
not valid:
<p>
<blockquote>
&lt;#if {{imageValid}}&gt;<br>
   &lt;thumbnail&gt;&lt;img src={{thumbURL}}&gt;&lt;/thumbnail&gt;<br>
&lt;#else&gt;<br>
   No Image<br>
&lt;#endif&gt;<br>
</blockquote>
<p>
An example when {{imageValid}} == "1":
<p>
<blockquote>
   &lt;img src=tn_image1.jpg&gt;
</blockquote>
<p>
An example when {{imageValid}} == "0":
<p>
<blockquote>
	No Image
</blockquote>
<p>
You may test to see if something is <i>not true</i> by placing an exclamation point before
the variable name.
<p>
	<blockquote>
		&lt;#if !{{variableName}}&gt;<br>
			[ HTML to include if false ]<br>
		&lt;#else&gt;
			[ HTML to include if true ]<br>
		&lt;#endif&lt;<br>
	</blockquote>	
</font><p>
<!--#include file=b_sec -->
Special HTML Tags
<!--#include file=e_sec -->
<font color=0000ff size=+1><b>&lt;thumbnail width=# height=# [pad=&lt;color&gt;] [crop] [othertags] &gt;&lt;/thumbnail&gt;</b></font><br>
<p>
Sets up the context for an individual thumbnail/image combination.
If 'pad' is specified, then the image is padded to
 be exactly the frame size with the color specified.  If crop is
 specified, then the image is sized to the exact frame size by
 cropping whatever doesn't fit.  Using pad and crop in the same
 thumbnail definition is illegal and may cause unpredictable
 results.  
<p>
    Example:   This is the simplest use of the thumbnail tag:
<p>
<blockquote>
           &lt;thumbnail&gt;<br>
              &lt;img src={{thumbURL}}&gt;<br>
           &lt;/thumbnail&gt;<br>
</blockquote>
<p>
 result:
 <p>
 	<blockquote>
           &lt;img src=tn_image1.jpg&gt;
	</blockquote>
<p>
    ie:   This example outputs a single thumbnail, but is nicely behaved to
           output width and height information to help the web browser more
           easily format the page while loading:
<p>
<blockquote>
           &lt;thumbnail width={{thumbnailFrameWidth}} height={{thumbnailFrameHeight}}&gt;<br>
              &lt;a href={{imagePageURL}}&gt;<br>
                 &lt;img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}&gt;<br>
              &lt;/a&gt;<br>
           &lt;/thumbnail&gt;<br>
</blockquote>
<p>
     result:
<p>
<blockquote>       
	       &lt;a href=image1.html&gt;<br>
              &lt;img width=96 height=72 src=tn_image1.jpg&gt;<br>
           &lt;/a&gt;<br>
</blockquote>
<p>
     ie:   This example outputs a single thumbnail, but if the intended
           image is beyond the end of the list, it outputs informative text
           instead:
<p>
<blockquote>
           &lt;#if {{imageValid}}&gt;<br>
              &lt;thumbnail width={{thumbnailFrameWidth}} height={{thumbnailFrameHeight}}&gt;<br>
                 &lt;a href={{imagePageURL}}&gt;<br>
                    &lt;img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}&gt;<br>
                 &lt;/a&gt;<br>
              &lt;/thumbnail&gt;<br>
           &lt;#else&gt;<br>
              No Image<br>
           &lt;#endif&gt;<br>
</blockquote>
<p>
     result with a valid image:
<p>
<blockquote>
           &lt;a href=image1.html&gt;<br>
              &lt;img width=96 height=72 src=tn_image1.jpg&gt;<br>
           &lt;/a&gt;<br>
</blockquote>
<p>
     result with an invalid image:
<p>
<blockquote>
           No Image
</blockquote>
<p>
<font color=0000ff size=+1><b>&lt;replicate #&gt;</b></font><br>
<p>
           Replicates contents of &lt;replicate&gt; tag pair "#" number of times.
<p>
           The "&lt;replicate&gt;" tag replicates it's contents for each iteration,
           exactly "#" times.  Use the "&lt;#if ...&gt;", "&lt;#else&gt;" and "&lt;#endif&gt;"
           with {{imageValid}} to handle special output for empty cells.
<p>
     ie:   This example generates a linear list of thumbnails:
<p>
<blockquote>
           &lt;replicate 5&gt;<br>
              &lt;thumbnail&gt;<br>
                 &lt;img src={{thumbURL}}&gt;<br>
              &lt;/thumbnail&gt;<br>
           &lt;/replicate&gt;<br>
</blockquote>
<p>
     result (assuming three images {{images}}=3).  (Note that the number of
           iterations is five, but the last two iterations were removed
           because the images were not valid):
<p>
<blockquote>
           &lt;img src=tn_image1.jpg&gt;<br>
           &lt;img src=tn_image2.jpg&gt;<br>
           &lt;img src=tn_image3.jpg&gt;<br>
</blockquote>
<p>
           To apply hyperlinks to the associated images, include the anchor
           tags inside the &lt;replicate&gt; section:
<p>
     ie:   This example generates a linear list of thumbnails which are
           hyperlinked to their associated image pages:
<p>
<blockquote>
           &lt;replicate num=5&gt;<br>
              &lt;a href={{imagePageURL}}&gt;<br>
                 &lt;thumbnail&gt;<br>
                    &lt;img src={{thumbURL}}&gt;<br>
                 &lt;/thumbnail&gt;<br>
              &lt;/a&gt;&lt;br&gt;<br>
           &lt;/replicate&gt;<br>
</blockquote>
<p>
     result (assuming three thumbnails):
<p>
<blockquote>
           &lt;a href=image1.html&gt;<br>
              &lt;img src=tn_image1.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image2.html&gt;<br>
              &lt;img src=tn_image2.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image3.html&gt;<br>
              &lt;img src=tn_image3.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
</blockquote>
<p>
           Of course, to properly give web browsers enough information to be
           intelligent about the layout, it is always a good idea to give the
           actual dimensions of a given graphic in a web page in the "width="
           and "height=" fields in an &lt;img&gt; tag, so:
<p>
     ie:   This example generates a linear list of thumbnails which are
           hyperlinked to their associated image pages and also web browser
           friendly:
<p>
<blockquote>
           &lt;replicate num=5&gt;<br>
              &lt;thumbnail&gt;<br>
                 &lt;a href={{imagePageURL}}&gt;<br>
                    &lt;img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}&gt;<br>
                 &lt;/a&gt;&lt;br&gt;<br>
              &lt;/thumbnail&gt;<br>
           &lt;/replicate&gt;<br>
</blockquote>
<p>
     result (assuming three thumbnails):
<p>
<blockquote>
           &lt;a href=image1.html&gt;<br>
              &lt;img width=90 height=42 src=tn_image1.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image2.html&gt;<br>
              &lt;img width=80 height=72 src=tn_image2.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image3.html&gt;<br>
              &lt;img width=96 height=72 src=tn_image3.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
</blockquote>
<p>
     ie:   This example generates the same list as above, but emits text if
           there is no valid image:
<p>
<blockquote>
           &lt;replicate num=5&gt;<br>
              &lt;#if {{imageValid}}&gt;<br>
                 &lt;thumbnail&gt;<br>
                    &lt;a href={{imagePageURL}}&gt;<br>
                       &lt;img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}&gt;<br>
                    &lt;/a&gt;&lt;br&gt;<br>
                 &lt;/thumbnail&gt;<br>
              &lt;#else&gt;<br>
                 No Image&lt;br&gt;<br>
              &lt;#endif&gt;<br>
           &lt;/replicate&gt;<br>
</blockquote>
<p>
     result (assuming three thumbnails):
<p>
<blockquote>
           &lt;a href=image1.html&gt;<br>
              &lt;img width=90 height=42 src=tn_image1.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image2.html&gt;<br>
              &lt;img width=80 height=72 src=tn_image2.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           &lt;a href=image3.html&gt;<br>
              &lt;img width=96 height=72 src=tn_image3.jpg&gt;<br>
           &lt;/a&gt;&lt;br&gt;<br>
           No Image&lt;br&gt;<br>
           No Image&lt;br&gt;<br>
</blockquote>
<p>
<font color=0000ff size=+1><b>&lt;replicateimages #&gt; / &lt;replicatepages #&gt;</b></font><br>
<p>
           Replicates contents of &lt;replicateimages&gt; or &lt;replicatepages&gt; tag
           pair for each image or page, changing the contents of {{imageNum}},
           {{imageNum0}} and {{currentImage}} or {{pageNum}}, {{pageNum0}} and
           {{currentPage}} appropriately.  These tags are designed to be used
           for image and page navigation, similiarly to how internet search
           engines give access to ranges of pages.
<p>
           If the number of images or pages exceeds the "#" parameter,
           then the image and page numbers will be centered around the
           current image or page (see the example below.)
<p>
     ie:   This example generates a simple list of all image numbers:
<p>
<blockquote>
           &lt;replicateimages&gt;{{imageNum}} &lt;/replicateimages&gt;
</blockquote>
<p>
     result (assuming images==10):
<p>
<blockquote>
           1 2 3 4 5 6 7 8 9 10
</blockquote>
<p>
     ie:   This example shows limited replication when the maximum number of
           replications is smaller than the total number of pages:
<p>
<blockquote>
           &lt;replicatepages 10&gt;{{pageNum}} &lt;/replicatepages&gt;
</blockquote>
<p>
     result (assuming pages==100 and currentPage==50):
<p>
<blockquote>
           46 47 48 49 50 51 52 53 54 55
</blockquote>
<p>
     ie:   This example shows the use of conditionals to prevent hyperlinking
           of the current page in the above situation:
<p>
<blockquote>
           &lt;replicatepages 10&gt;<br>
              &lt;#if {{currentPage}}&gt;<br>
                 {{pageNum}}<br>
              &lt;#else&gt;<br>
                 &lt;a href="{{pageURL}}"&gt;{{pageNum}}&lt;/a&gt;<br>
              &lt;#endif&gt;<br>
           &lt;/replicatepages&gt;<br>
</blockquote>
<p>
     result (assuming pages==100 and pageNum==50):
<p>
<blockquote>
           &lt;a href="page46.html"&gt;46&lt;/a&gt;<br>
           &lt;a href="page47.html"&gt;47&lt;/a&gt;<br>
           &lt;a href="page48.html"&gt;48&lt;/a&gt;<br>
           &lt;a href="page49.html"&gt;49&lt;/a&gt;<br>
           50<br>
           &lt;a href="page51.html"&gt;51&lt;/a&gt;<br>
           &lt;a href="page52.html"&gt;52&lt;/a&gt;<br>
           &lt;a href="page53.html"&gt;53&lt;/a&gt;<br>
           &lt;a href="page54.html"&gt;54&lt;/a&gt;<br>
           &lt;a href="page55.html"&gt;55&lt;/a&gt;<br>
</blockquote>
<p>
<font color=0000ff size=+1><b>&lt;assign [variable]=[value]&gt;</b></font><br>
<p>
	The assign tag allows you to specify the value of any variable.
	Simply use the variable name, and equals sign, then some expression.
<p>
<blockquote>
		&lt;assign myValue={{oldValue+10}}&gt;
</blockquote>
<p>
	When used with a &lt;replicate&gt; tag, you can use the &lt;assign&gt; tag
	to count.
<p>
<blockquote>	
	&lt;assign myValue=0&gt;<br>
		&lt;replicate 5&gt;<br>
			&lt;assign myValue={{myValue+1}}&gt;<br>
			&lt;b&gt;{{myValue}}&lt;/b&gt;&lt;br&gt;<br>
		&lt;/replicate&gt;<br>
</blockquote>
<p>
<font color=0000ff size=+1><b>&lt;assign [variable]={{random:[value]}}&gt;</b></font><br>
<p>
The random tag allows you to generate a random number between 0 and [value].  This allows you
randomly change which content is included on a page.  Common uses of the random tag include
randomly selecting how to border a thumbnail, or randomly changing the size of a thumbnail.
<p>
<b>Related Topics</b><br>
<!--#include file=b_list -->
<li><a href=h_webgen.htm>Creating Web Pages</a>
<!--#include file=e_list -->
<!--#include file=e_cont -->