HTML exportation - Creating your own HTML templates

Creating your own HTML templates

HTML Exportation / Creating your own templates
Version: for Dig. Cam. / for 3D Users
menu access: Tools / HTML exportation...

Overview

You need to be familiar with HTML language to create your own HTML templates. It is better to have an HTML editor such Dreamweaver or FrontPage.

A template contains one or more HTML pages, which specific 3D Photo Browser tags. These tags are interpreted by the HTML exportation tool to know where and how files must be integrated within the pages. A template can include JavaScript code or another HTML programming language. If you use a specific language, you might need to adjust the recognized extensions.

A template can include a set of frames, for example one page for displaying files, another one for displaying a table of content.

If your template has several HTML pages, you must distinguish the main page, the template page and the other pages.

The main page
This is the starting point for the template (for example the page which contains a set of frames). A specific tag (<brhredirect>) redirects the parse to the template page. If the main page does not include a set of frame, the main page is also the template page.

The template page
This is the page, which is used to generate HTML pages from your files. It contains files insertion tags. There is only one template page by models. It is parsed during the first pass of the exportation. At the end of this pass, all HTML pages are created.

The other pages
The other pages are parsed only if the main page reference them. 3D Photo Browser specific tags are updated in a second pass. These tags create links between pages that were created in the first pass. This is the step were table of contents are generated.

Where should I put the template in order to make it recognized by the application?

A template must be put in the HTML templates directory, which is located in 3D Photo Browser directory. The main page must be copied in this directory. The other pages must be copied in a sub directory, which has the name as the main page.
Moreover, if you want to provide a preview for your template you must copy a jpg screen capture (recommended size 300x300). The capture must have the same name as the main page and must be copied in the HTML templates directory.

The following example shows the path for a template which includes a preview, a main page (which is also the template page) and an image which the background of the main page.

\3D Photo Browser\HTML templates\template_example.htm
\3D Photo Browser\HTML templates\template_example.jpg
\3D Photo Browser\HTML templates\template_example\background.gif.

How can I check that the template is correct?

Simply by try it using the HTML exportation command. 3D Photo Browser informs you if it finds syntax errors while it parses the specific tags. A best practice is also to look the existing predefined templates to find a concrete solution to your questions.

3D Photo Browser specific tags and attributes list

For each tags or attributes, the description informs about the context (tags that applies to the main page, the template page or the other pages which are linked to the main page). Look at the overview to get more information about these pages.

Tags to insert files in the HTML pages

brhfile

Context:
Template page only.
Tag does not need to be closed.
Can be used as an attribute value.

Attributes:
tag: name of the information tag which gives access to a particular information of the exported file. There are many values possible, and you might find them using the Tags >> menu of the Export information command for example.

Details:
Used as a tag, this command inserts information, which is provided by the currently exported file (look at information, keywords or properties). You can check that the information exists using the <brhifexist> and </brhifexist> tags.

Used as an attribute value, brhfile is replaced by the name of the currently exported file. You might use brhfile in <a href="brhfile"> and <img src="brhfile"> tags.

The tag <a href="brhfile"> automatically generates a link to the file. When 3D Photo Browser parses this tag, it replaces brhfile by the currently exported file. Depending on the exportation mode, set by the <brhhref> tag, the file is copied or an image is created from it, which size is specified using the <brhbmap> tag. Whatever the mode, files are copied in the images directory, which has been set by the user in the HTML template and destination tab.

The tag <img src="brhfile" width="100"> automatically creates an image from the file. When Photo Browser parses this tag, it replaces brhfile by the name of a created image. It creates an image, which width is 100 (height depends of the width/height ratio) which name is the original file name more the suffix which as been defined in the HTML template and destination tab. The image format is the one defined in the Images format and options tab. Images are copied in the image directory, defined by the user in the HTML template and destination tab.

It possible to use a relative path with brhfile, which can be needed if you include a frames set in your template (look at where should I put the template files). For example, <a href="../brhfile"> is valid. Once parsed, the generated link is something like <a href="../images/file.jpg"> where images is the directory, which contains the images (cf. HTML template and destination).

Use the <brhfilenext> tag to change the current file and process the next one in the list of the files to process, or use an identifier with each brhfile for a non-sequential template. Indeed, you may associate an identifier to each file if the way the files appear in the page is not sequential. For example, you can display images at the beginning of the HTML page, and information about images at the end of page. When an identifier is associated with a file, the identifier is valid as long as 3D Photo Browser for 3D Userscess the page. You just need to add a number to brhfile in order to associate the file with the number (i.e. brhfile3). If this is the first time this number is used, 3D Photo Browser for 3D Userscess the next file in the list of the files to process. If the number has been previously used, 3D Photo Browser set back the file as the current processed file.

Example:
<brhifexist><br><b>Title: </b><brhfile tag="brttitle"></brhifexist>

This code adds the title, which has been defined in the information panel for the current file. In this case, brhfile is used as an HTML tag and gives an access to files properties, information or keywords.

This example creates a 3x3 table, the first line contains three images (width 100 pixels) for three different files. The second line contains the name, and the third line contains the title of each files. Note that we use a relative path, which means that this example is to be used in a set of frames.

brhfilenext

Context:
Template page only.
Tag does not need to be closed.
Can be used as an attribute value.

No attribute.

Details:
This tag moves to the next file in the list of the files to process. The exportation finish when there are no more files to export (look at <brhseq> for particular cases). This tag can also be used as an attribute value (i.e. <img src="brhfilenext" width="100"> or <a href="brhfilenext">file</a>). In this case, it works the same way as brhfile, except that it goes to the next file once the tag has been parsed.

Example:
<brhseq loop="-1">
<img src="brhfile" width="100"><br>
<brhfilenext>
</brhseq>

This example creates 100 pixels images width for the files to process. The following code is equivalent:

Tags to define the kind of generated links and exported files

brhbackground

Context:
Template page only.
Tag does not need to be closed.

Attributes:
color: hexadecimal value for the background color

Details:
This tag defines the background color when an image is created from a 3D scene or an icon is created from a file. This tag takes effect from its place and can be used as many times as you want. It applies only for files, which are linked to the page using the <a href="brhfile"> and which images does not appear directly within the page.

If the image appears within the page (using <img src="brhfile">), the color set in <body bgcolor=""> is used for creating the images.

Example:
<brhbackground color="#FFFFFF">

This tag defines a white background for images created from 3D scenes or files.

brhbmap

Context:
Template page only.
Tag does not need to be closed.

Attributes:
type: defines kind of file the tag applies to. Can be 2d, 3d, other
width: width of images, in pixels
height: height of images, in pixels

Details:
This tags defines the size images that are created from 2d, 3d or other files, using <a href="brhfile">. When it is not possible to create an image from a file (i.e. is the file is a text file), the icon of the file is extracted, using the defined width and height values. This tag takes effect from its place and can be used as many times as you want.

You can omit the width or the height attribute, when 2d type is used. In this case, the ratio width/height is kept when images are created. If you specify both width and height, images might appear distorted.

Note:
These values are ignored when <img src="brhfile"> is used. In this case, the width / height is directly set by the img tag itself.

Example:
<brhbmap type="2d" width="640"> <brhbmap type="3d" width="640" height="400"> <brhbmap type="other" width="640" height="400">

These tags define the size of the images that will be created for each kind of file. Images created from files are 640 pixels width. Height is computed using the original image width/height ratio.

brhhref

Context:
Template page only.
Tag does not need to be closed.

Attributes:
2d: define the kind of links for the image files. Value can be image or file.
3d: define the kind of links for the 3d scene files. Value can be image or file.
other: define the kind of links for the other files. Value can be image or file.

Details:
This tag provides a control on the kind of the links when brhfile is used within a <a href=""> tag. When you used image as an attribute value for <brhhref>, the link of the <a href=""> tag refers an image. When you used the file attribute value for <brhhref>, the link of the <a href=""> tag refers the file itself. This tag takes effect from its place and can be used as many times as you want

When an image is being processed and <brhhref 2d="file"> has been set, <a href="brhfile"> performs a copy of the image without any conversion or resizes operation. The use of <brhhref 2d="image"> creates a link to an image, which is converted to the user-selected format, which size is defined by <brhbmap> tag.

When a 3D scene is being processed and <brhhref 3d="file"> has been set, <a href="brhfile"> performs a copy of the scene. The use of <brhhref 3d="image"> creates a link to an image created from the scene, which size is defined by <brhbmap> tag and the background color is set by <brhbackground>.

When the processed file is neither an image nor a 3D scene and <brhhref other="file"> has been set, <a href="brhfile"> performs a copy of the file. The use of <brhhref other="image"> creates a link to an image created from the file (by default the kind of file icon), which size is defined by <brhbmap> tag and the background color is set by <brhbackground>.

Example:
<brhbackground color="#FFFFFF">
<brhbmap type="3d" width="640" height="400">
<brhhref 3d="image">
<a href="brhfile"><brhfile tag="brtfilename(shortname)"> image </a>
<brhhref 3d="file">
<a href="brhfile"><brhfile tag="brtfilename(shortname)"> scene</a>

When a 3D file is being processed, this code inserts two links in the page. The first one links to an image created from the scene (size 640x400 on a white background). The second one links to the 3D file itself. If the processed file is named pen.lwo, you get the following result:

Pen image
Pen scene

Conditional tags, loop tags

brhifexist, brhelse

Context:
Template page only.
Tag must be closed using </brhifexist>.

No attribute.

Details:
This tags performs a conditional test and inserts HTML code if the condition is satisfied. It is used with <brhfile> tag and inserts HTML code only if brhfile tag contains information. If no information exists, the HTML code located between <brhelse> and </brhifexist> is inserted to the generated page. If you do not use <brhelse> tag and brhfile contains no information, the code between <brhifexist> and </brhifexist> is removed.

Note:
If several <brhfile> tags are used between <brhifexist> tags, the condition is satisfied if only one <brhfile>contains information.

Example:
<brhifexist><br><b>Title: </b><brhfile tag="brttitle"></brhelse>No title </brhifexist>
<brhifexist><br><b>Subject: </b><brhfile tag="brtsubject"></brhelse>No subject</brhifexist>
<brhifexist> <br><b>Size: </b><brhfile tag="brt2dwidth"> x <brhfile tag="brt2dheight"> pixels </brhifexist>

This code inserts the title and the subject of the processed file. If it is an image, the size is also inserted.

brhseq

Context:
Template page only.
Tag must be closed using </brhseq>.

Attributes:
loop: number of iteration to perform between the <bhrseq> and </brhseq> tags . -1 value repeats the sequence until there are no more files to process.
break: defines the condition for breaking the loop and ensure that the generated code is valid. Possible values are always and first. If you omit this attribute, the sequence continues until all loops have been done (except is the loop value is -1).
noblank: removes redundant spaces from the code that is generated by the sequence (look at <brhformat>)

Details:
This tags repeats a piece of HTML code a given number of time. The <brhfilenext> is often used between <brhseq> and </brhseq> to change the current processed file within the sequence. If the loop value is -1, the sequence runs until there are no more files to process.

When there is no more file to export and the sequence is not finished, it can be useful to break the loop immediately. However, this is not always possible, for example if the sequence creates table cells, because the generated code might become invalid. Use the break attribute to define the way the loop end when no more file have to be exported:

break="always" stops the sequence immediately.
break="first" stops the sequence only it is its first loop.
If this attribute is no defined, the sequence ends when the defined loop number is reached.
If loop="-1" the sequence break immediately whatever the value specified by the break attribute.

When no more file have to be exported, 3D Photo Browser specifics tags are no longer interpreted.

Examples:
<select name="slide" onChange="change();">
<brhseq loop="-1">
<option value="brhfile" selected><brhfilenbr><brhifexist> - <brhfile tag="brttitle"><brhelse> - <brhfile tag="brtfilename(shortname)"></brhifexist><brhfilenext>
</brhseq>
</select>

This code creates a popup menu, using the title (or the file name, if no title is defined) of all files that are to be exported. The OnChange JavaScript function is called each time the user change the current selection.

<brhseq loop="3" break="always">
  <tr>
  <brhseq loop="3">
    <td>
    <a href="brhfilenext"><img width="100" src="brhfile"></a><br>
    <a href="brhfile"><brhfile tag="brtfilename(shortname)"></a>
    </td>
  </brhseq>
  </tr>
</brhseq>

This code creates a table with 9 cells. Each cell have a reduce image (100 pixels width) and the file name above. Two tags <brhseq> are interwoven. The first one generates the table lines; the second one generates the columns. To ensure that the code will be valid, whatever the number of files to process, the second sequence ends when all loops have been done. The first sequence can stops immediately when there is no more file to process.

Redirecting tags when using a set of frames

brhredirect

Context:
Main page only.
Tag does not need to be closed.

Attributes:
href: contains the name of the template page.

Details:
When a template contains a set of frames, the main page defines the set itself. The brhredirect redirects the parse to the template page, which contains the exported files. Look at the overview to get more information on the way to organize your set of frames.

Example:
<brhredirect href="example/main.htm">
<html>
<head>
<title><brhtitle></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Mootools">
<meta name="description" content="This is an example">
</head>
<frameset cols="156,833" rows="*" frameborder="NO">
<frame src="example/left.htm" name="left">
<frame src="example/main.htm" name="main">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

This example is the HTML code for a main page (named is example.htm), which has two frames (left.htm and main.htm). These frames are set in a directory named example, as it is explained in the overview. The template page is named main.htm. This page contains 3D Photo Browser tags for exporting your files. Note that the <meta name="author"> and <meta name="description"> gives a description for the template and defines the template author. This information is displayed in the dialog (HTML template and destination).

Tags for linking with the generated pages (table of contents)

brhcurpagenbr

Context:
All pages linked to the main page.
Tag does not need to be closed.

Attribute:
format: sets the number of digit of the current page number.

Details:
This tag inserts the current page number when generating the table of contents. It is to be used with <brhlistpage> tag. The value is one at the brhlistpage first iteration and is increased as many times as page number were created each brhlistpage loop.

Example:
Look at <brhlistpage> example.

brhdate

Context:
All pages linked to the main page.
Tag does not need to be closed.

Attribute:
format: defines the date format. You can use one or more of the following characters: d (date), h (hour), t (text).

Details:
This tag is replaced by the current date in an HTML page.

Example:
<brhdate format="dht"> inserts the current date using the following format: September 10, 2003, 10:42 AM
<brhdate format="dh"> inserts the current date using the following format: 09/10/2004, 10:42
<brhdate format="d"> inserts the current date using the following format: 10/09/2004

brhfilenbr

Context:
Template page only.
Tag does not need to be closed.

Attributes:
format: sets the number of digit of the file number.

Details:
This tags inserts the number of files currently imported in the HTML page. This number is set to one, each time a new page is started, and is incremented by one each time a file is being exported (using brhfile).

Example:
<brhseq loop="-1">
Image <brhfilenbr format="2">
</brhseq>

This code inserts Image 01, Image 02 and Image 03 if there are three files to export.

brhfirstpage

Context:
Template page only.
Use as an attribute value.

Details:
This tag is used in a <a href="brhfirstpage"> to insert the name of the first created page.

Example:
<a href="brhfirstpage">Première page</a> inserts a link to the first created page.

brhlastpage

Context:
Template page only.
Use as an attribute value.

Details:
This tag is used in a <a href="brhlastpage"> to insert the name of the last created page.

Example:
<a href="brhlastpage">Last page</a> inserts a link to the last created page.

brhlistpage

Context:
All pages linked to the main page.
Tag must be closed using </brhlistpage>.

No attribute.

Details:
This tag writes the list of all created pages. It is used with the brhpage tag. HTML code between <brhlistpage> and </brhlistpage>tags is copied as many times as created pages. On each loop, brhpage value is the file name of a created page.

Example:
<brhlistpage>
<a href="brhpage">Page <brhcurpagenbr format="2"> / <brhpagenbr format="2"></a><br>
</brhlistpage>

If three pages were created during the exportation, the following table of contents is generated:
Page 01 / 03
Page 02 / 03
Page 03 / 03

brhnextpage

Context:
Template page only.
Use as an attribute value.

Details:
This tag is used in a <a href="brhnextpage"> to insert the name of the next created page. If the current page is the next page, no link is created and the code between <a href="brhnextpage"> and </a> is removed.

Example:
<a href="brhnextpage">Next page </a> inserts a link to the next page.

brhpage

Context:
Template page only.
Use as an attribute value.

Details:
This attribute value is to be used in <a href="brhpage"> between <brhlistpage> and </brhlistpage>. It generates a link to a created page. HTML code between <brhlistpage> and </brhlistpage> is copied as many times as created pages. On each loop, brhpage value is the file name of a created page.

Example:
Look at <brhlistpage> example.

brhpagenbr

Context:
All pages linked to the main page.
Tag does not need to be closed.

Attribute:
format: sets the number of digit of the page number.

Details:
This tag inserts number of created pages.

Example:
Look at <brhlistpage> example.

brhprevpage

Context:
Template page only.
Use as an attribute value.

Details:
This tag is used in a <a href="brhprevpage"> to insert the name of the previous created page. If the current page is the first page, no link is created and the code between <a href="brhprevpage"> and </a> is removed.

Example:
<a href="brhprevpage">Previous page </a> inserts a link to the previous page.

Other tags

brhformat

Context:
Template page only.
Tag must be closed using </brhformat>.

Attributes:
noblank: removes redundant spaces.
nocarriage: removes carriage returns.

Details:
This tag removes the redundant spaces or the carriage returns on the code generated between <brhformat> and </brhformat>. Using this tags produces a readable code and removes undesirable spaces or carraige return.

Example:
<brhformat noBlank noCarriage>
<img src="brhfile" width="100" vspace="0" hspace="0" align="middle">
</brhformat>

This code removes spaces and carriage returns. Using this tag, the images are exported side by side. Without this tag, images are exported one above the other.

brhstring

Context:
Template page only.
Tag must be closed using </brhstring>.
Can be used as an attribute value.

Attributes:
id: a number that identifies the text set between <brhstring> and </brhstring>

Details:
This tags stores an encoded text to be use elsewhere. To use a stored text, just use brhstring and its identifier number as an attribute value. For example, <brhstring id="1">Hello</brhstring> stores Hello with 1 as identifier. To use the text, use brhstring1, for example in <img src="fichier.htm" alt="brhstring1">.

This tag is often used with JavaScript, particularly to call a function with particular parameters.

Example:
<brhseq loop="-1">
<brhstring id="1"><brhfile tag="brtfilename(shortname)"></brhstring>
<brhstring id="2"><br><b>Title: </b> <brhfile tag="brttitle"></brhstring>
<img src="brhfile" onLoad="swap('brhfile', 'brhstring1', 'brhstring2', true)" onClick="swap('brhfile', 'brhstring1', 'brhstring2', false)" alt="brhstring1" width="100">
<brhfilenext>
</brhseq>

This example defines an infinite sequence. Two text are stored: 1 is identifier of first the text, 2 the identifier of the second text. These texts are used as parameters in the swap function, called when the user click the image. Without using <brhstring> function cannot be correctly called, because HTML code might be incorrectly interpreted (the title might contains ' or " characters).

brhtitle

Context:
All pages linked to the main page.
Tag does not need to be closed.

No attribute.

Details:
This tags inserts the page title, defined by the user in Images format and options tab tab.

Example:
<html>
<head>
<title><brhtitle></title>
</head>

Defines the window title text, using the user title.

meta

Context:
Main page only.
Tag does not need to be closed.

Attributes:
name="author" with content attribute: defines template author.
name="description" with content attribute: describes the template.

Details:
The meta tags used with author and description defines the authors and gives a description for the template. This information is displayed in HTML template and destination.

Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Mootools">
<meta name="description" content="This is an example">
</head>