Creating your own templates

 Top  Previous  Next

HTML page templates are stored in the "templates" subdirectory from where the application is installed. Probably the easiest way to create new templates is to copy an existing template directory and then modify the template files. To be recognized by BreezeBrowser Pro a template directory must contain at least the following files:

 

•index_template.{ext}- the main index page. After processing this becomes index.{ext}
•fullsize_template.{ext} - page to display the main image. After processing this becomes the image filename with {ext} extension
•thumbnail_template.{ext} - template to build up a set of thumbnails. After processing the thumbnails are concatenated and stored in the @body@ token so that they can be inserted into the index page

 

NOTE: The template directory must contain the files listed above in order to be listed in the HTML dialog. You can prevent the file appearing in the final output by making the template file zero length. For example to create main and thumbnail images without any HTML pages you could create a null template where index_template.htm, fullsize_template.htm and thumbnail_template.htm are all zero length files in the template directory.

 

Optional additional index template files called index2_template.{ext} and index3_template.{ext} can be included. After processing these become index2.{ext} and index2.{ext} respectively. This is useful if you want to use frames (see the "frames" template for an example of how to do this).

 

Up to two optional additional fullsize and thumbnail template files can also be included. This is useful if you want to have more than one page to view the image (see the "Simple + settings window" template for an example of how to do this). Another use is to create sets of pages in different languages or using more than one layout style (see the "multi-view" template for an example of how this can be used).

 

{ext} is normally "htm" but it can be any extension you choose provided all the template files in a given directory have the same extension. If you want to use a server side scripting language such as PHP the templates can be renamed to have the extension ".php" e.g. index_template.php, fullsize_template.php, thumbnail_template.php.

 

Template file

Destination name

How to reference in web pages

index_template.{ext}

index.{ext} e.g. index.htm

index.{ext}

index2_template.{ext}

index2.{ext} e.g. index2.htm

index2.{ext}

index3_template.{ext}

index3.{ext} e.g. index3.htm

index3.{ext}

fullsize_template.{ext}

<image_name>.{ext} e.g. img_0123.htm

@url@, @nextUrl@, @next@, @nextIcon@, @prev@, @prevIcon@

fullsize2_template.{ext}

2<image_name>.{ext} e.g. 2img_0123.htm

2@url@, 2@nextURL@, @next2@, @nextIcon2@, @prev2@, @prevIcon2@

fullsize3_template.{ext}

3<image_name>.{ext} e.g. 3img_0123.htm

3@url@, 3@nextURL@, @next3@, @nextIcon3@, @prev3@, @prevIcon3@

thumbnail_template.{ext}

N/A - stored in @body@ token

Use @body@ to add to index.{ext}, index2.{ext} or index3.{ext}

thumbnail2_template.{ext}

N/A - stored in @body2@ token

Use @body2@ to add to index.{ext}, index2.{ext} or index3.{ext}

thumbnail3_template.{ext}

N/A - stored in @body3@ token

Use @body3@ to add to index.{ext}, index2.{ext} or index3.{ext}

 

Any non-template files in the template directory are copied unmodified into the HTML output directory. One possible use for this is to include images for logos, buttons or the window background (see the "icons" template for an example of this).

 

BreezeBrowser Pro will preserve the end of line style used in the template when generating HTML pages. If you wish to generate pages that use scripts (e.g. JSP or Perl) to run on a Unix server you can avoid problems with PC-style LF-CR at the end of each line by saving your templates with Unix-style LF end of lines.

 

Specifying the user defined fields

 

It is possible to define up to two additional fields for configuring the template by creating a file called "config.dat" in a subdirectory called "config" in the template directory. The config.dat file specifies the caption for the entry fields and their type: text entry, checkbox or dropdown list. If the config.dat file is omitted the HTML dialog will display a text entry fields for the @user1@ token (this is for compatibility with versions of BreezeBrowser older than version 2.8).

 

The templates supplied with BreezeBrowser Pro all contain config.dat files and it is worth taking a look at these to see how they work. The config.dat file can be used to define input fields for the @user2@ and @user3@ tokens and is best described using an example. The example below defines a dropdown list for selecting the background color and a checkbox to select whether to display EXIF data:

 

<?xml version="1.0" ?>                                                                

<breezebrowser version="2.8">                                                                

       <html_config>

               <description>Enter a short description of your template here</description>                                        <user2 enabled="1">                                                

                       <caption>Background color:</caption>                                        

                       <select name="name" size="1">                                        

                               <option value="#000000">black</option>                                

                               <option>white</option>                                

                               <option value="gray" default>gray</option>                                

                       </select>                                        

               </user2>                                                

               <user3 enabled="1">                                                                        

                       <caption>Show EXIF shooting data</caption>                                                                                

                       <input type="checkbox" value="@exif@">                                                                                

               </user3>                                                                                        

       </html_config>                                                                                                

</breezebrowser>                                                                                                        

 

The <description> tag defines a short description which is displayed in the HTML dialog below the "HTML template:" drop down list. The description can be up to two lines long.

 

The <user2 enabled="1"> tag starts the definition of the input field for a dropdown list for the @user2@ token. This can be disabled by setting enabled="0". The definition ends with the </user2> closing tag.

 

The caption is for the input field is specified by <caption>Background color:</caption>. It is a good idea to keep the caption short to allow space for the input area.

 

The dropdown list is specified by the <select> tag (the name and size attributes in the tag are ignored). Each item in the list is specified by an <option> tag. The text between the <option> and </option> tags will be displayed in the list. If a value attribute is defined in the <option> tag this will be placed in the @user2@ token when the option is selected otherwise the text between the <option> and </option> tags will be used. A default item can be specified by adding the default attribute in the <option> tag. The dropdown list is set to the default value when the HTML dialog is displayed unless the HTML generator has already been run in this folder in which case the previous setting is used.

 

In the example above the @user3@ input field is set to a checkbox with the caption "Show EXIF shooting data". When the checkbox is checked @user3@ is set to "@exif@". When it is unchecked @user3@ is an empty string. The value attribute in the <input> tag is optional and if it is omitted @user3@ is set to 1 when the checkbox is checked and 0 when it is unchecked.

 

The example below shows how to specify a text entry field for @user2@ and to disable the second input field:

 

<?xml version="1.0" ?>                                                                

<breezebrowser version="2.8">                                                                

       <html_config>                                                        

               <user2 enabled="1">                                                

                       <caption>Subject:</caption>                                        

                       <input type="text">                                        

               </user2>                                                

               <user3 enabled="0">                                                                        

               </user3>                                                                        

       </html_config>                                                                                

</breezebrowser>                                                                                        

 

The <input type="text"> tag specifies the input field as a text entry box.

 

Please note: the config.dat file only controls the settings for the @user2@ and @user3@ tokens. If either user2 or user3 are defined the input fields for @user1@ will be disabled. @user1@ is only retained for backwards compatibility with templates from versions of BreezeBrowser before version 2.8.