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 items marked with an asterisk. The user HTML template folder may also contain a CSS file used for styles in both index.html and preview.html.
| Sample File Name | Description |
|---|---|
| index.html* | Main thumbnail grid page |
| preview.html* | Page used to show previews |
| styles.css | Stylings for the pages |
| ui.rb | Describes any user-defined controls for the template |
Store any additional image, sound, and/or Flash assets in a separate asset folder. The assets folder will be copied without changes to the output destination.
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 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.
| Variable | Description | Example |
|---|---|---|
| {count} | Returns the number of images being processed | {count} => 23 |
| {idx} | Returns the current thumbnail index or preview index | {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. | {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> |
| {index_page_next_path} {index_page_previous_path} | Returns the path of the previous/next index page for the current index page. If there is only one index page then an empty string is returned. | {index_page_next_path} => index3.html |
| {index_page_path} | Returns the path of the index page that the current preview page came from. | {index_page_path} => index2.html |
| {page} | Returns the page number being processed for index or preview pages. | {page} => 7 |
| {page_count} | Returns the total number of index pages. | {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. | {preview_height} => 600 |
| {preview_link} | Generates an image tag for the current preview image. (Suitable for use only when processing preview.html) | {preview_link} => <img src="images/filename.JPG" alt="filename.JPG" border="0" width="800" height="600" /> |
| {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. | {preview_links} => <a href="preview1.html">Previous</a> <a href="index.html">Index</a> <a href="preview3.html">Next</a> |
| {preview_max_height} {preview_max_width} | Returns the maximum value the user entered into the Preview's Max Height or Width field. | {preview_max_height} => 600 |
| {preview_page_next_path} {preview_page_previous_path} | Returns the path to the previous/next preview page. | {preview_page_next_path} => preview3.html |
| {preview_page_path} | Returns the path to the {idx} preview page (or the preview currently being processed). | {preview_page_path} => preview1.html |
| {preview_path} | Returns the path to the index preview image (or the preview currently being processed). | {preview_path} => images/filename.JPG |
| {preview_text} | Returns the text the user entered into the Preview's Title field. | {preview_text} => {caption} |
| {preview_width} | Returns the width of the scaled preview at {idx}. If no parameter provided, returns the preview used in the preview page being processed. | {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> {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. | {thumbnail_columns} => 3 |
| {thumbnail_height} {thumbnail_width} | Returns the height/width of the scaled thumbnail at {idx} or if no parameter provided, the thumbnail used in the table cell being processed. | {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). | {thumbnail_link} => <a href="preview1.html"><img src="thumbs/IMG_1.JPG" alt="" width="128" height="112" border="0" /></a> |
| {thumbnail_max_height}{thumbnail_max_width} | Returns the maximum value the user entered into the Thumbnail's Max. Height/Width field. | {thumbnail_max_height} => 128 |
| {thumbnail_path} | Returns the path to the {idx} thumbnail image (or the thumbnail currently being processed). | {thumbnail_path} => thumbs/IMG_1.JPG |
| {thumbnail_rows} | Returns the number of rows entered by the user in the Thumbnail's Rows field. | {thumbnail_rows} => 4 |
| {thumbnail_text} | Returns the text the user entered into the Thumbnail's Title field. | {thumbnail_text} => {filenamebase} |
| {word_index} | Returns the word "Index". | {word_index} => Index |
| {word_next} | Returns the word "Next". | {word_next} => Next |
| {word_previous} | Returns the word "Previous". | {word_previous} => Previous |