$(cpicName) Help - Creating Web Page Themes What are Themes? A web page theme in can best be thought of as a style. A theme specifies the general layout, look, and feel of pages created by the Web Page Generator.

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 in structuring the page.

Themes are generally stored in the '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.

The information below provides a detailed look at how to create web page themes for .

Theory of Operation The Web Page Generator in 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.

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.

As the theme is loaded, special HTML tags ("<thumbnail...>", "<replicate...>") 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 ("<#if ...>", "<#else>", and "<#endif>") are processed.

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 during the process. All other information (the only user changeable options) are derived from the <photodex_theme> section.

Theme Definition Every web page theme file must contain a <photodex_theme> section, started with a starting theme tag ("<photodex_theme") and a terminator ("</photodex_theme>"). Everything within these tags including these tags is omitted in the final output.

The <photodex_theme> 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="<theme title>").

The simplest theme section is as follows:

<photodex_theme title="Sample Theme" type=thumbnail>
</photodex_theme>

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}}.)

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:

<group title="group title">
[variable list...]
</group>

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.

Themes
Output Options
  Headings (Thumb Pages)
  Home Link (Thumb Pages)
  Navigation (Thumb Pages)
  Background (Thumb Pages)
  Thumbnails (Thumb Pages)
     Headings (Image Pages)
     Home Link (Image Pages)
     Navigation (Image Pages)
     Background (Image Pages)

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:

<input type=color name=optBackgroundColor alt="Color for the background" value=ffffff>

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 color picker in the interface.

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:

file - file specification
checkbox - checkbox (either "0" or "1")
color - color picker (represented with hex color)
text - single line text
radio - radio button (either "0" or "1")
scroll - scrollbar (like value, approx. +/- 2^31)
textarea - free-form text (can contain newlines)
value - numeric value (approx. +/- 2^31)

A simple single line heading text definition with a blank default value would look like this:

<input type=text name=pageHeading value="My Default Heading">

A simple checkbox which defaults to "on" would look like this:

<input type=checkbox name=includeSection default=1 value="Include this">

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.

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:

<input type=value name=thisValue value=12 min=1 max=25>

Or similarly, a scrollbar with a default value of 50 which can be between 10 and 100 would be specified as follows:

<input type=scroll name=thisValue value=50 min=10 max=100 width=200>

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:

<group title="Radio Example">
<input type=radio name=radioButtonA:a value="Radio Button A" default=1>
<input type=radio name=radioButtonB:a value="Radio Button B" default=0>
<input type=radio name=radioButtonC:a value="Radio Button C" default=0>
<input type=radio name=radioButtonD:a value="Radio Button D" default=0>

<input type=radio name=radioButtonE:b value="Radio Button A" default=1>
<input type=radio name=radioButtonF:b value="Radio Button A" default=0>
</group>

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.

Inside the <group> tags, you can use standard HTML to control the placement of the input objects in the user interface. For example:

<group title="Radio Example">
<center>
<table border=0 cellspacing=0 cellpadding=5>
<tr>
<td>
<input type=radio name=radioButtonA:a value="Radio Button A" default=1>
<input type=radio name=radioButtonB:a value="Radio Button B" default=0>
<input type=radio name=radioButtonC:a value="Radio Button C" default=0>
<input type=radio name=radioButtonD:a value="Radio Button D" default=0>
</td>
<td>
<input type=radio name=radioButtonE:b value="Radio Button A" default=1>
<input type=radio name=radioButtonF:b value="Radio Button A" default=0>
</td>
</tr>
</table>
</center>
</group>

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. ( tests whether or not a given theme file is valid by checking for a valid <photodex_theme> section containing all of the necessary components.) Once 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 installation directory. If ever tries to load a theme file which is not valid, that theme is removed from the list of known themes automatically.

When looks for the "template.lst" file, it first looks in 's default data directory. If the file is not there, then it looks in "./web". always writes new "template.lst" files to the data directory. This is necessary because can run from a read-only device, so it will be unable to write to the device to update the "template.lst" file.

The entire <photodex_theme> section is removed for final output.

Reserved Variable Names Many macros are maintained by and cannot be modified using the theme definitions. If you try to use these names for dynamically specified variables in the <photodex_theme> section, they will not work. All of these reserved variables are replaced in the theme with plain text representing their contents.

Using Variables. 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.

Variable names are always surrounded by double braces {{ }} when they are intended to be translated.

For example to use the variable optBackgroundColor as the background color in a body tag:

<body bgcolor={{optBackgroundColor}}<

In another example, to include the contents of a variable called pageHeading, making them bold, and specifying the font:

<font face="Arial" size="-1">
<b>{{pageHeading}}</b>
</font>

Conditionals The tags "<#if ...>", "<#else>", and "<#endif>" are used for conditional inclusion of sections of HTML. The "<#if ...>" tag is designed to be used with any variable (reserved or dynamic) which resolves to a "true" or "false". If an "<#if ...>" tag is used with a variable which resolves to text, then the evaluation is true if the text is not blank and not "false".

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:

<#if {{imageValid}}>
<thumbnail><img src={{thumbURL}}></thumbnail>
<#else>
No Image
<#endif>

An example when {{imageValid}} == "1":

<img src=tn_image1.jpg>

An example when {{imageValid}} == "0":

No Image

You may test to see if something is not true by placing an exclamation point before the variable name.

<#if !{{variableName}}>
[ HTML to include if false ]
<#else> [ HTML to include if true ]
<#endif<

Special HTML Tags <thumbnail width=# height=# [pad=<color>] [crop] [othertags] ></thumbnail>

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.

Example: This is the simplest use of the thumbnail tag:

<thumbnail>
<img src={{thumbURL}}>
</thumbnail>

result:

<img src=tn_image1.jpg>

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:

<thumbnail width={{thumbnailFrameWidth}} height={{thumbnailFrameHeight}}>
<a href={{imagePageURL}}>
<img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}>
</a>
</thumbnail>

result:

<a href=image1.html>
<img width=96 height=72 src=tn_image1.jpg>
</a>

ie: This example outputs a single thumbnail, but if the intended image is beyond the end of the list, it outputs informative text instead:

<#if {{imageValid}}>
<thumbnail width={{thumbnailFrameWidth}} height={{thumbnailFrameHeight}}>
<a href={{imagePageURL}}>
<img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}>
</a>
</thumbnail>
<#else>
No Image
<#endif>

result with a valid image:

<a href=image1.html>
<img width=96 height=72 src=tn_image1.jpg>
</a>

result with an invalid image:

No Image

<replicate #>

Replicates contents of <replicate> tag pair "#" number of times.

The "<replicate>" tag replicates it's contents for each iteration, exactly "#" times. Use the "<#if ...>", "<#else>" and "<#endif>" with {{imageValid}} to handle special output for empty cells.

ie: This example generates a linear list of thumbnails:

<replicate 5>
<thumbnail>
<img src={{thumbURL}}>
</thumbnail>
</replicate>

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):

<img src=tn_image1.jpg>
<img src=tn_image2.jpg>
<img src=tn_image3.jpg>

To apply hyperlinks to the associated images, include the anchor tags inside the <replicate> section:

ie: This example generates a linear list of thumbnails which are hyperlinked to their associated image pages:

<replicate num=5>
<a href={{imagePageURL}}>
<thumbnail>
<img src={{thumbURL}}>
</thumbnail>
</a><br>
</replicate>

result (assuming three thumbnails):

<a href=image1.html>
<img src=tn_image1.jpg>
</a><br>
<a href=image2.html>
<img src=tn_image2.jpg>
</a><br>
<a href=image3.html>
<img src=tn_image3.jpg>
</a><br>

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 <img> tag, so:

ie: This example generates a linear list of thumbnails which are hyperlinked to their associated image pages and also web browser friendly:

<replicate num=5>
<thumbnail>
<a href={{imagePageURL}}>
<img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}>
</a><br>
</thumbnail>
</replicate>

result (assuming three thumbnails):

<a href=image1.html>
<img width=90 height=42 src=tn_image1.jpg>
</a><br>
<a href=image2.html>
<img width=80 height=72 src=tn_image2.jpg>
</a><br>
<a href=image3.html>
<img width=96 height=72 src=tn_image3.jpg>
</a><br>

ie: This example generates the same list as above, but emits text if there is no valid image:

<replicate num=5>
<#if {{imageValid}}>
<thumbnail>
<a href={{imagePageURL}}>
<img width={{thumbWidth}} height={{thumbHeight}} src={{thumbURL}}>
</a><br>
</thumbnail>
<#else>
No Image<br>
<#endif>
</replicate>

result (assuming three thumbnails):

<a href=image1.html>
<img width=90 height=42 src=tn_image1.jpg>
</a><br>
<a href=image2.html>
<img width=80 height=72 src=tn_image2.jpg>
</a><br>
<a href=image3.html>
<img width=96 height=72 src=tn_image3.jpg>
</a><br>
No Image<br>
No Image<br>

<replicateimages #> / <replicatepages #>

Replicates contents of <replicateimages> or <replicatepages> 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.

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.)

ie: This example generates a simple list of all image numbers:

<replicateimages>{{imageNum}} </replicateimages>

result (assuming images==10):

1 2 3 4 5 6 7 8 9 10

ie: This example shows limited replication when the maximum number of replications is smaller than the total number of pages:

<replicatepages 10>{{pageNum}} </replicatepages>

result (assuming pages==100 and currentPage==50):

46 47 48 49 50 51 52 53 54 55

ie: This example shows the use of conditionals to prevent hyperlinking of the current page in the above situation:

<replicatepages 10>
<#if {{currentPage}}>
{{pageNum}}
<#else>
<a href="{{pageURL}}">{{pageNum}}</a>
<#endif>
</replicatepages>

result (assuming pages==100 and pageNum==50):

<a href="page46.html">46</a>
<a href="page47.html">47</a>
<a href="page48.html">48</a>
<a href="page49.html">49</a>
50
<a href="page51.html">51</a>
<a href="page52.html">52</a>
<a href="page53.html">53</a>
<a href="page54.html">54</a>
<a href="page55.html">55</a>

<assign [variable]=[value]>

The assign tag allows you to specify the value of any variable. Simply use the variable name, and equals sign, then some expression.

<assign myValue={{oldValue+10}}>

When used with a <replicate> tag, you can use the <assign> tag to count.

<assign myValue=0>
<replicate 5>
<assign myValue={{myValue+1}}>
<b>{{myValue}}</b><br>
</replicate>

<assign [variable]={{random:[value]}}>

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.

Related Topics

  • Creating Web Pages