AddThis Social Bookmark Button

Listen Print Discuss

Better Templates for iPhoto's BetterHTMLExport

by Dave Sag
04/02/2002

In his recent O'Reilly article on iPhoto export filters, Derrick Story made reference to the BetterHTMLExport filter by Simeon Leifer.

BetterHTMLExport, at version 1.3 at time of writing, provides significant improvements over the built-in HTMLExport filter, including the option for you to create your own templates.

In this article I will walk you through the process of creating your own template set. I assume that you know a bit about HTML already and you have followed the instructions for installing the BetterHTMLExport.iPhotoExporter by copying the entire 'BetterHTMLExporter.iPhotoExporter' folder you downloaded into the 'iPhoto/Contents/PlugIns' folder. (To open a package up Control/Right click on iPhoto and select 'Show Package Contents')

First up if you have not already done so, select a couple of images in iPhoto, click on 'share' and then 'export'. If you have installed BetterHTMLExport properly you'll see its tab in the top right of the export options pane, as shown to the right.

The default template provided by BetterHTMLExport is not bad, but it's certainly not great. The following comparison shows the difference between the builtin template and the template I made. The HTML code from my new templates also includes appropriate description and keyword fields.

The following thumbnails highlight the difference between the default template and the more detailed and attractive template we will make. You can click on either image to see the outout in detail. Opens in a new window.

The default image page output Image page output from my new template

For anything other than the most trivial of examples you are going to want to create your own templates.

Note: Under MacOSX you put items you only want available to yourself in your local ~/Library folder, and items you want to be globally accessable in your /Library folder at the root level of your startup disk.

You should create the following folder

~/Library/BetterHTMLExport/templates

Control click on iPhoto to open up the package and copy the contents of the templates folder into the templates folder you just created. Rename the files as follows:

OldNew
builtin.plistmy.plist
image.templatemyimage.template
index.templatemyindex.template

Now if you have installed the OSX Developer tools you will have Apple's own PropertyList editor. This nothing more than an XML editor for editing property lists. If you don't have a PropertyList editor then you can use any text editor to edit property lists.

Use the Property editor to edit plists Or you can use a text editor.

Comment on this articleLet's talk more about iPhoto, BetterHTMLExport, and the things we can do with these tools.
Post your comments

The first thing you will want to do is edit my.plist. The properties you must change are image_template_name, index_template_name, template_description, and template_name. The template_name is the name that will appear in the templates popup menu in iPhoto. The template_description can be anything you like and the file names should match the file names you just created. Assuming all is okay your plist should look something like the one pictured above.

If it doesn't, don't panic. I have zipped up the this example template and it is available for download at http://www.davesag.com/BHTMLXtemplate.zip. Go get it.

A small note about the 'default' item in the plist. This is an undocumented, but fairly obvious feature. If the 'default' item is present and set to '1', BetterHTMLExporter will make that the default template. If more than one template has the default flag set then BetterHTMLExport will pick the first one it finds as being the default. When you are happy with your new template I suggest you make it the default and delete the default from the other templates.


Quit iPhoto and relaunch it. Select a couple of photos and choose 'share' then 'export'. Under the BetterHTMLExport tab click on the 'Advanced options' button. If everything is working okay you will see your new template listed under the templates popup menu. Now we can get into editing the templates themselves.

BetterHTMLExport provides a series of special tags, enclosed in square braces '[...]'. Anyone familiar with template languages will have no problems deciphering this. The template language consist of the following commands. Note that these tags are described more fully in the documentation that comes with BetterHTMLExport.

commandmeaningexample
[comment some comment text] for comments in your template that will not be rendered into the final html page [comment this is a comment]
[date {date format}] displays the date according to the optional date format provided. [date %a %m/%d/%y %I:%M:%S %p]
[datevalue datekey{date format}] (V1.3 only) displays the date provided in the datekey using to the optional date format provided. [datevalue imageArchiveDate %a %m/%d/%y %I:%M:%S %p]
[each ID value listKey]content[endeach ID] Repeats the content section of the template for each value in a list. The key 'value' will contain one value from the list referenced by listKey. 'value'_index will hold the index number, starting at zero. [each rows directRows directTable]
Index = [directRows_index]
[endeach rows]
[if ID leftvalue test rightvalue]true content{[else ID]false content}[endif ID] Includes the true content section of the template if 'leftvalue test rightvalue' results in true. if there is an else that content will be included if the test results in false. [if usebackground useColorBackground == YES]
<body bgcolor="">
[else usebackground]
<body>
[endif usebackground]
[include path to file] Includes and parses the content of the specified file. [include local_header.template]
[loop ID value start end increment]content[endloop ID] Loops from start through to end, incrementing by increment. the value of value is maintained internal to the loop. [loop test x 1 6 2]
[x],
[endloop test] would output 1, 3, 5,
[{value} key]Inserts the value of the named key. the expression 'value' is optional[useColorBackground]

Some careful picking through the template code you have in myindex.template and myimage.template is all you need to see examples of this language in action. I shall highlight a key change in myimage.template for the purpose of example.

At line 21 of the original template, your current template in this case, the following lines proceed. The code change to make is inserted in bold text. 

	[if directnavif showDirectNavigation == YES] 
	<td>
	<table border="0" cellspacing="2">
	[each navrowseach directRows directTable] 
	<tr>
	[each navcolseach directColumn directRows]
	[if curimgpgif directColumn.imagePageNumber == currentImagePageNumber] 
	<td>
	<b>
	[directColumn.imagePageNumber] 
	</b>
	</td>
	[else curimgpgif] 
	<td>
	<a href="[directColumn.imagePageName]">
	[directColumn.imagePageNumber] 
	</a>
	</td>
	[endif curimgpgif]
	[endeach navcolseach] 
	</tr>
	[endeach navrowseach] 
	</table>
	</td>
	
	
	[else directnavif]
	<td align="center"><a href="../[indexFileName]#[imagePageName]">
	[if showimgtitleif showImageTitles == YES] 
	<h2>[imageTitle]</h2>
	[else showimgtitleif]
	<font size="-2">index</font>
	[endif showimgtitleif] 
	</a></td>
	
	
	[endif directnavif]

The intention here is that if the user has elected not to show direct navigation, as per the checkbox in the BetterHTMLExport UI, then we should show the title here between the two navigation buttons, with a link back to the index page. Of couse if we are not showing the title, then just show the word "index".

iPhoto: The Missing Manual

Related Reading

iPhoto: The Missing Manual
By David Pogue, Joseph Schorr, Derrick Story

Table of Contents
Index (PDF)

Below the photo we want to add very similar code. If the user has checked 'show title' and not checked 'direct to page navigation' we'll just display the word 'index' in place of the photo title. This looks better than having the image title appear at both the top and bottom of the page.

The other changes are cosmetic and involve the reframing of the image in a table, and installing the text underneath cleanly.

The new template also inserts description and keyword meta tags in the header of the page.

BetterHTMLExport 1.3 comes with a template called Kitchen Sink that exports every piece of data it can. Study these templates and the documentation Simeon provides, as there is a wealth of neat data in there.

Dave Sag is a skilled Object Modeler and Software Designer, using Java as well as other programming environments.

Return to the Mac DevCenter.