Web Galleries and Export

From CameraBits
Jump to: navigation, search

Export

The Export option creates a full set of files from a selection of images. With this command you can make a web gallery with all the internal links already set up. This can be posted directly to a web site and can be very useful to show a client proofs from a shoot, quickly and easily. The web pages are fully customizable with respect to colors, type faces etc, and Variables can be used to add metadata into the layouts.

Exporter short.jpg

Select Template

Photo Mechanic now includes a variety of Flash templates in addition to the PM Classic as described below. Each is slightly different and the main Export dialog will only allow you to choose customizations applicable to the chosen template. The dialog changes to reflect this but in general, the uses of the labels remains the same from one template to the next. Export Text and Export XML options are at the bottom of the list.

Rendering

  • JPEG Quality: set the slider to an appropriate amount, 6 or 7 is a good compromise between size and quality
  • Subsample Chroma: removes some chroma information reducing file size still further and the expense of color quality
  • Sharpen Images: applies sharpening to the exported images - recommended.
  • Convert to sRGB Colorspace: converts to the sRGB colorspace which will show images to their best advantage when viewed in non-ICC profile aware applications like many web browsers. Recommended unless you know for certain the images are to be viewed in a color managed application.
  • Use Original File names for Images: exported images keep the original file names.

Open in Browser: when the export is completed the finished gallery will automatically open in your web browser for checking.


Page Section

  • HTML Title Tag: This field is used to define the text in the top line of a Web

browser, also used by many search engines to locate information. Banner: Add a logo or banner image to the top of each index page.

  • Banner2: Add a logo or banner image to the top of each large image page.
  • Banner Width and Height: Controls the width and height of the banner image displayed on each page. This should be the same width and height as the image used.
  • Title and Title 2: Type in a title or use Variables to generate a title. The variable {page} adds a page number to each page of thumbnails. In the screenshot above the title of each page would be the name of the folder containing the images followed by 'Page 1'. Any subsequent pages would be the same with 'Page 2, Page 3, Page 4' etc.'
  • Columns and Rows: Set how you would like the thumbnails to be arranged, how many columns and how many rows per page. This determines how many images will be on each page and thus how many pages will be generated.
  • Background: Choose a background color for each page or choose a background image to be used.


Table Section

  • Table Width: Sets the width of the table containing the rows and columns. The

value may be given as a number of pixels or as a percentage.

  • Left and Right Margin: Specify the left and right margin area between the table's outer edge and browser window.
  • Cell Spacing: The amount of thickness, in pixels, of the walls surrounding each image cell in the table.
  • Table Color / None: The color, or absence of color inside the table. Text/Links Section Set the colors of the various page elements.

Text/Links Section

Here's where you can set the colors of the various page elements.

  • Title: is equivalent to the 'cb_title' HTML tag
  • Title2: is equivalent to the 'cb_title2' HTML tag
  • Caption: is equivalent to the 'text' HTML tag
  • Link: is the same as the 'link' HTML tag
  • Visited: is the equivalent to the 'vlink' HTML tag.
  • Home Page: enter the name of your webpage.
  • Home URL: enter your main webpage address (<http://www.xyz.com>www.xyz. com). Include Page Links: includes Previous and Next links.
  • Include All Index Link: includes a link back up to the main index on each large image page.
  • Max Height / Max Width: Set the size of the thumbnails. They will be fitted inside the pixel dimensions without altering the aspect ratio, much like the 'Fit in Box' options in other export dialogs.
  • Frame Color / Frame Thickness: Set the color and thickness of the frame surrounding each thumbnail cell.

Images

  • Max Height / Max Width: Set the size of the large images. They will be fitted

inside the pixel dimensions without altering the aspect ratio, much like the 'Fit in Box' options in other export dialogs.

  • Frame Color / Frame Thickness: Set the color and thickness of the frame surrounding each image cell.
  • Preserve EXIF: includes camera EXIF info in the exported images. Preserve IPTC: includes IPTC metadata in the exported images.
  • Watermarking: When checked will place watermarks over images generated in the gallery.
  • Include a link beneath the image: Adds a link underneath each image that users can click on to view or download the original file.
  • Link Name: enter the name of the link.
  • Link URL: enter your image Web address.

Export Text

Among the various Web Gallery templates are the Text and XML Export templates.

Exporter textxml2.jpg

Use Variables to choose which metadata fields to export and separate them with a Tab to distinguish between the fields in the text file. You can use the {tab} variable instead of inserting Tab characters if you wish.

Many external applications such as spreadsheets and databases can import TAB delimited text files. Word processors can do 'mailmerges' based on TAB delimited text files so you could use this option to generate labels for 35mm slides based on variables (for instance: {Category} and {Name}).

Save as One/Individual Files: This option sets whether the export creates one text file containing all the metadata or a series of individual files, one per image.

Export XML

The XML Exporter template allows you to export metadata to an XML format for use in applications that can work with the eXtensible Markup Language format.

HTML Template Exporter

The HTML Template Exporter is different from all other Exporter templates in that it processes HTML that you create in order to generate a Web gallery. The HTML Template Exporter uses some simple markup features to allow you to create your own customized Web galleries. In order to start working with the HTML Template Exporter, you need to tell Photo Mechanic where you're storing your HTML templates. You do this in the Files tab of the Preferences dialog. Click on the Choose... button across from the field labeled "Location of user HTML templates:" and use the folder picker dialog to choose the folder where you're going to create your HTML templates. Inside this folder is where you place your HTML template folders.

Overview

The HTML Template Exporter generates web pages from user-supplied HTML templates. A user HTML template is a folder with specially marked-up HTML and CSS files, 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	(this is the main page where thumbnail grids are generated)
	preview.html	(this is 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

Additional image, sound, and flash assets needed by a user HTML template should be stored in an assets folder:

assets/
shadow.gif

The assets folder will be copied verbatim with no processing to the output destination.

User-defined controls are described in a file named:

ui.rb	(this file 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

See the HTML Template Controls section below for more details on the various controls that can be specified.

Template HTML is standard HTML or XHTML (recommended) with special markup. All Photo Mechanic variables may be used to extract data from your images and put that data on web pages. In addition, there are a number of Template HTML-only variables that are used to help template authors produce effective HTML pages.

See the HTML Templates Variables section below for more details on the Template HTML-only variables that may be used to markup HTML templates.

Simple Example for 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>

Simple 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>

Stylesheet processing differs from HTML processing in that the use of {variables} requires placing a '#' in front of the {variable}, like so:

#{variable}

This is necessary because each style declaration requires a beginning '{' and an ending '}' already and this would cause issues for the parser. Remember to use variables in styles.css with a leading '#'.

Simple 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

Simple 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")

Notice that 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.

This concludes the Simple Example. If you placed the four files (index.html, preview.html, styles.css, and ui.rb) into a folder named "Simple Example" inside the folder you chose to be the location of your user HTML templates folder then the HTML Template Exporter will now show your "Simple Example" in its list of available HTML templates.

HTML Template Controls:

There are four HTML Template controls that may be used 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 will be 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 can be accessed by using {varname}

Value of the control in the styles.css file can be accessed by using #{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.

Value of the control in the html template can be accessed by using {varname}

Value of the control in the styles.css file can be accessed by using #{varname}

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.

Value of the control in the html template can be accessed by using {varname}

Value of the control in the styles.css file can be accessed by using #{varname}

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.

Value of the control in the html template can be accessed by using {varname}

Value of the control in the styles.css file can be accessed by using #{varname}

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

HTML Templates Variables

The following variables are used only in the HTML Template Exporter template. You can still use the normal set of 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_indx 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'll need to add quotes around the variable expansion so that your HTML has the text enclosed in quotes.