The HTML Template Exporter allows you to export a web gallery from a custom template using Photo Mechanic variables. You could style your template to match your existing branding or website.. HTML Template Exporter is an advanced feature that requires knowledge of HTML and CSS. 

You can create more than one custom template, but each template must be in its own folder inside the template folder location. 
Specify your template folder location in Preferences> Files.






Once you have set the file preferences, you can export web galleries using your custom templates by going to File: Export... and selecting HTML Template Exporter.  Select the template you wish to use.

Overview: Creating a custom HTML template

HTML templates are folders with HTML and CSS files. You may also include an optional assets folder and an optional user-interface file. 
At the minimum, a user HTML template folder must have the following layout:


example_template/
   index.html    (the main thumbnail grid page)
   preview.html    (the page used to show previews

The user HTML template folder may also contain a CSS file used for styles in both index.html and preview.html:

styles.css

Store any additional image, sound, and Flash assets in an asset folder.  

assets/
shadow.gif

The assets folder will be copied without changes to the output destination.  
Describe any user-defined controls in a file named:


ui.rb    (describes the user interface for the template)

A fully-featured user template folder would have the following layout:


example_template/
index.html
preview.html
styles.css
ui.rb

Your Template HTML should use standard HTML or XHTML (recommended) with special markup. All Photo Mechanic variables can be used to extract data from your images and put that data on web pages. There are also several Template HTML-only variables.

Example index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;

<html>
<head>
<title>{folder} | Page {page}</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> </head>
<body>
   <h1>{folder}</h1> <h2>{job}</h2>
   <p class="nav">{index_links}</p> <table>
       {table_row_start}<tr>
           {table_col_start}<td align="center">{thumbnail_link}<p>{filename}</p></td>{table_col_end}
       </tr>{table_row_end} </table>
   <p>Made with Photo Mechanic | {dow}, {monthname} {day}, {year4}</p>
</body>
</html>

Example for preview.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html>
<head>
<title>{folder}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> </head>
<body>
   <h1>{folder}</h1>
   <h2>{job}</h2>
   <p class="nav">{preview_links}  | Image {idx} of {count}</p> <p>{preview_link}</p>
   <p>{caption}<br />{filename}</p>
   <p class="credit">Made with Photo Mechanic | {monthname} {day}, {year4}</p>
</body>
</html>

CSS use of Photo Mechanic {variables} require placing a '#' in front of the {variable}:

#{variable}

Example for styles.css:

body {
   margin-left:0px;
   margin-right:0px;
   margin-top:0px;
   background-color:#{background_color};
}  padding:20px;
p {color:#{text_color};
  font-family:Arial,Helvetica,sans-serif;
}  font-size:14px
h1 {color:#{text_color}; font-family:Arial,Helvetica,sans-serif;
}  font-size:24px
h2 {color:#{text_color}; font-family:Arial,Helvetica,sans-serif;
}  font-size:18px
.nav {
  color:#{nav_text_color};
  font-family:Arial,Helvetica,sans-serif;
}  font-size:12px
.nav a:link {
  color:#{nav_link_color};
}  text-decoration:none;
.nav a:visited {
  color:#{nav_link_color};
  font-family:Arial,Helvetica,sans-serif;
  text-decoration:none;
}  font-size:12px
.nav a:hover {
  color:#{nav_hover_color};
}  text-decoration:underline
.nav a:active {
  color:#{nav_text_color};
}  text-decoration:underline

Example for ui.rb:

colorbutton(:background_color, "Background color:",  :value=>"000000")
               colorbutton(:text_color,       "Text color:", :value=>"A0A0A0")
               colorbutton(:nav_text_color,   "Nav text color:", :value=>"183F00")
               colorbutton(:nav_link_color,   "Nav link color:", :value=>"99A700")
               colorbutton(:nav_hover_color,  "Nav hover color:", :value=>"FFFFFF")

In this example, each color button has a name and that those names are used in the styles.css file (above) to provide user control over the colors used on the pages.
Place the template files  (index.html, preview.html, styles.css, and ui.rb) into a folder with your desired template name, ie "Simple Example"  inside your main template folder (specified in Preferences: Files). The HTML Template Exporter now shows "Simple Example" in its list of available HTML templates

HTML Template Controls:

There are four HTML Template controls you can use to customize your template:

colorbutton
fontcombo
spinedit
textfield

Any of these controls may appear in your ui.rb file and in any order. The controls are created in the order that they appear in your ui.rb file.

colorbutton(varname, label, attributes={})

This creates a color picker preceded by a static text label (label) with variable name varname, and optional attributes.
Value of the control in the HTML template uses {varname}
Value of the control in the styles.css file uses #{varname}

colorbutton(:text_color, "Text Color:", :value=>"FFFFFF")
fontcombo(varname, label, attributes={})

Creates a font menu preceded by a static text label (label) with variable name varname, and optional attributes.

fontcombo(:font_name, "Font:", :selected=>"Arial")
spinedit(varname, label, attributes={})

Creates a text field and spin control preceded by a static text label (label) with variable name varname, and optional attributes.

spinedit(:font_size, "Font Size:", :value=>8, :formatter=>"unsigned", :min=>8, :max=>72)
textfield(varname, label, attributes={})

Creates a text field preceded by a static text label (label) with variable name varname, and optional attributes.

textfield(:author, "Author Name:", :value=>"{username}") 

HTML Templates Variables

The following variables are exclusive to the HTML Template Exporter template. You can still use any variables used elsewhere in Photo Mechanic.
{count} Returns the number of images being processed. Example:

{count}
   => 23

{idx} Returns the current thumbnail index or preview index. Example:

{idx}
   => 3

{index_links} Generates a set of links useful for navigation from an index page. If no page_indx is provided then the index navigation links are generated for the index page being processed. Example:

{index_links}
   => <a href="index.html">Previous</a>  <a href="index3.html">Next</a>
         <a href="index.html">1</a>  2 <a href="index3.html">3</a>
       

You can achieve your own specific layout by creating your own links using {index_page_previous_path} and {index_page_next_path}
{index_page_next_path} Returns the path of the next index page for the current index page. If there is only one index page then an empty string is returned.
Example:

{index_page_next_path}
   => index3.html

{index_page_path} Returns the path of the index page that the current preview page came from. Example:

{index_page_path}      
=> index2.html

{index_page_previous_path} Returns the path of the previous index page for the current index page. If there is only one index page then an empty string is returned. Example:

{index_page_previous_path}
   => index.html

{page} Returns the page number being processed for index or preview pages. Example:

{page}
   => 7

{page_count} Returns the total number of index pages. Example:

{page_count}
   => 8

{preview_height} Returns the height of the scaled preview at {idx} or if no parameter provided, the preview used in the preview page being processed. Example:

{preview_height}
   => 600

{preview_link} Generates an image tag for the current preview image, suitable for use when processing preview.html only.
Example:

{preview_link}
      => <img src="images/filename.JPG" alt="filename.JPG" border="0" width="800" height="600" />

You can create your own preview image tag by using {preview_path}, {filename}, {preview_width}, and {preview_height}
{preview_links} Generates a set of links useful for navigation from a preview page. If no preview_index is provided then the preview navigation links are generated for the preview page being processed.
 Example:

{preview_links}
   => <a href="preview1.html">Previous</a>  <a href="index.html">Index</a> <a href="preview3.html">Next</a>

You can achieve your own specific layout by creating your own links using {preview_page_previous_path}, {preview_page_next_path} and {index_page_path}
{preview_max_height} Returns the maximum value the user entered into the Preview's Max. Height field.
 Example:

{preview_max_height}
   => 600

{preview_max_width} Returns the maximum value the user entered into the Preview's Max. Width field. Example:

{preview_max_width}
   => 800

{preview_page_next_path} Returns the path to the next preview page (or the starting preview page if the current preview page is the ending preview page). Example:

{preview_page_next_path}
   => preview3.html

{preview_page_path} Returns the path to the {idx} preview page (or the preview currently being processed). Example:

{preview_page_path} 
   => preview1.html

{preview_page_previous_path} Returns the path to the previous preview page (or the ending preview page if the current preview page is the starting preview page). Example:

{preview_page_previous_path}
   => preview1.html

{preview_path} Returns the path to the indx preview image (or the preview currently being processed). Example:

{preview_path}
   => images/filename.JPG

{preview_text} Returns the text the user entered into the Preview's Title field. Example:

{preview_text}
   => {caption}

{preview_width} Returns the width of the scaled preview at {idx} or if no parameter provided, the preview used in the preview page being processed. Example:

{preview_width}
   => 800

{table_row_start} Marks the beginning of an indexed page layout. Most commonly this is used right before a TR tag but can be used with DIV and SPAN as well.
 When expanded, the HTML between {table_row_start} and {table_row_end} will be repeated {thumbnail_rows} times or until the index page runs out of images

<table>
   {table_row_start}<tr>
       {table_col_start}<td class="tt" align="center">{thumbnail_link}<p>{filesize}</p></td>{table_col_end}
   </tr>{table_row_end}
</table>

{table_col_start} Marks the beginning of a thumbnail layout. Most commonly this is used right before a TD tag but can be used with DIV, SPAN, and A as well.
When expanded, the HTML between {table_col_start} and {table_col_end} will be repeated {thumbnail_columns} times or until the index page runs out of images.

<table>
   {table_row_start}<tr>
       {table_col_start}<td class="tt" align="center">{thumbnail_link}<p>{filesize}</p></td>{table_col_end}
       </tr>{table_row_end}
</table>

{table_col_end} Marks the ending of a thumbnail layout. Most commonly this is used right after a </td> tag but can be used with </div>, </span>, and </a> as well. When expanded,the HTML between {table_col_start} and {table_col_end} will be repeated {thumbnail_columns} times or until the index page runs out of images.

<table>
   {table_row_start}<tr>
       {table_col_start}<td class="tt" align="center">{thumbnail_link}<p>{filesize}</p></td>{table_col_end}
       </tr>{table_row_end}
</table>

{table_row_end} Marks the ending of an indexed page layout. Most commonly this is used right after a </tr> tag but can be used with </div> and </span> as well.
When expanded, the HTML between {table_row_start} and {table_row_end} will be repeated {thumbnail_rows} times or until the index page runs out of images.

<table>
   {table_row_start}<tr>
       {table_col_start}<td class="tt" align="center">{thumbnail_link}<p>{filesize}</p></td>{table_col_end}
       </tr>{table_row_end}
</table>

{thumbnail_columns} Returns the number of columns entered by the user in the Thumbnail's Columns field.
Example:

{thumbnail_columns}
   => 3

 

{thumbnail_height} Returns the height of the scaled thumbnail at {idx} or if no parameter provided, the thumbnail used in the table cell being processed.
Example:

{thumbnail_height}
   => 112

{thumbnail_link} Generates a link to the {idx} preview (or current table cell) with an image tag for the {idx} thumbnail (or current table cell).
Example:

{thumbnail_link}
   => <a href="preview1.html"><img src="thumbs/IMG_1.JPG" alt="" width="128" height="112" border="0" /></a>    

You can create your own thumbnail/preview links by using {preview_page_path}, {thumbnail_path}, {thumbnail_width} and {thumbnail_height}.
 {thumbnail_max_height} Returns the maximum value the user entered into the Thumbnail's Max. Height field.
 Example:

{thumbnail_max_height}
   => 128

{thumbnail_max_width} Returns the maximum value the user entered into the Thumbnail's Max. Width field.
Example:

{thumbnail_max_width}
   => 128

{thumbnail_path} Returns the path to the {idx} thumbnail image (or the thumbnail currently being processed). Example:

{thumbnail_path}
   => thumbs/IMG_1.JPG

{thumbnail_rows} Returns the number of rows entered by the user in the Thumbnail's Rows field.
Example:

{thumbnail_rows}
   => 4

{thumbnail_text} Returns the text the user entered into the Thumbnail's Title field.
Example:

{thumbnail_text}
   => {filenamebase}  

{thumbnail_width} Returns the width of the scaled thumbnail at indx or if no parameter provided, the thumbnail used in the table cell being processed.
Example:

{thumbnail_width}
   => 128

{word_index} Returns the word "Index".
Example:

{word_index}
   => Index

{word_next} Returns the word "Next".
Example:

{word_next}
   => Next  

{word_previous} Returns the word "Previous".
Example:

{word_previous}
   => Previous

Note that when you use a variable that returns a string of text, you must contain it in quotes:

"{variable}"