Albums in the Birch Island gallery are generated from Picasa, a free photo package from Google.To create them, we select the desired album (or folder) in Picasa, then choose Album>Export as HTML page (or Folder>Export as HTML Page) to launch the powerful Web Templating System. Picasa prompts for image size (640px), name of export folder, and presentation template, then creates an export folder containing image files and associated HTML documents forming the web version of the album, and launches a browser for preview. If things look okay, we upload the new folder to the web site and add a link from the gallery page. We do this for each album in the gallery.

This is the basic procedure but some customization is desirable. As it happens, in addition to providing sample templates, Picassa allows us to develop or import templates. We created a template for Birch Island with image and album captions. Adding captions is easy in Picasa, and the new template carries them through to the generated web pages. We discuss the new template below.

Developing a Template

Picasa stores its templates in C:/Program Files/Picasa2/web/templates along with some terse documentation in C:/Program Files/Picasa2/web/documentation. The templates folder (or library, or directory, if you prefer) has several subfolders (blackbg, greybg, blackfrm, etc.), one per template, and creating a new template is just a matter of creating a subfolder with new styles etc. Later, when you invoke Album>Export as HTML page (or Folder>Export as HTML Page), the new template will be listed as a possible choice.

To see what a template folder contains, open the folder blackbg, one of the Picasa-provided templates. It contains some HTML files, two TPL files called index.tpl and imagetarget.tpl, an image file called preview.jpeg, a CSS file, and a subfolder called assets containing a second CSS file and a logo. To open the tpl, html, and css files, use Notepad or similar text editor. Right click on the file name and choose Open with . . .

Use Notepad to open index.tpl. This file has commands used to generate html documents. Here are the first few lines. The pound signs indicate these are comments, not commands:

#templatefile -v "1.0" -n "Template 2, 2-page black background" -d "Thumbnail index page linked to a full view picture page."
# pound sign is a comment character
# lines that begin with "include" point to a file to be included at this point
# lines that begin with "loop" repeat the specified file once per image
# if loop or include files begin with "#templatefile" then that templatefile
# is processed in its entirety. In this way you can create
# file-per-image exports.
# The special "targetloop tplfile templatefile" command loops over each image,
# interpreting tplfile for each one. A sequence number is appended to the export filename
# specified in tplfile. After the tplfiles have been exported, templatefile is included once per
# exported file, with "<%target%>" defined as the relative path of the exported file.

These comments are followed by commands such as define, targetloop, copy, etc., which we will get to in a minute. But first, let's go back to Picasa at the point of choosing a template. One choice is "Template 2, 2-page black background" and if you select this, a preview image is shown in the right window, and a description "Thumbnail index page linked to a full view picture page." appears below the list of templates. This "Template 2" is from the blackbg folder. The name and description come from the first line of index.tpl above, and the preview image is just preview.jpeg in this same folder. Choosing this template and selecting "finish" tells Picasa to execute this index.tpl file to generate the web album.

The Birch Island template

Like blackbg, the Birch Island template generates one page showing thumbnails, each thumbnail linked to its "full view picture" page with caption, back links, etc. We'll describe the stepwise development of this template, and later show alternate approaches such as frame, Flash, and javascript designs.

First, we create a new folder in templates, which we call BI. Next we need some tpl and html files. TPL files contain commands like "include <filename> " where filename is a file in the template folder containing a fragment of html code. Picasa obeys "include" directives and other commands to assemble html fragments to form the desired html pages.

Consider the desired thumbnails page. Let's think of it as divided into three parts, a header beginning with the usual DOCTYPE, <html>, <head> etc., followed by a list of references to thumbnail images, followed by a footer containing some closing html. For Birch Island albums, the header and footer are more or less static, while the middle part varies with the number of images in the album.

Using Notepad, we create three html fragments called header.html, thumbnail.html and footer.html. Our thumbnail fragment is code we want replicated for each thumbnail image. It is just a <div> containing the thumbnail image and its link to the full page view:

<div class="thumbnailstyle"><a href="<%targetPath%>"><img align="center" src="<%itemThumbnailImage%>" width="<%itemThumbnailWidth%>" height="<%itemThumbnailHeight%>" title="<%itemCaption%>" border="0" /></a> </div>

Variable names like <%targetPath%> will be replaced by Picasa with the target path to the full page view of the image associated with the thumbnail. More on this later. Class "thumbnailstyle" is defined in a css file, also shown later.

We create a fourth html file for the full view image, called fullview.html. There is no need to divide fullview.html into header, middle and footer fragments as we did with the thumbnails page, because the file is so simple.

We store these four files in our new folder BI. We also have a style.css and favicon.ico file, and we create a subfolder of BI called assets to hold them. Then we use Notepad to create an index.tpl file in BI looking like this:

#templatefile -v "1.0" -n "Birch Island" -d "black background, thumbnail points to full view picture"
define exportFileName index.html
include header.html
targetloop targetfile.tpl thumbnail.html
include footer.html
copy assets\

These commands tell Picasa how to create the thumbnails page. The first line specifies the name of the template and its description. The second defines the desired export file name, namely index.html. The third, fourth and fifth lines tell Picasa to create index.html by including first the header.html code, then cycling ("looping") through each image repeating the thumbnail.html code, and finishing with footer.html. The sixth line copies the assets contents (in our case: style.css, favicon.ico) to the export folder.

We need one more file, referred to as targetfile.tpl in the fourth line above. This is a second tpl file that tells Picasa how to assemble the full view pages. This file is a three-liner, saying in effect "use fullview.html as the prototype":

#templatefile full view image
define exportFileName target.html
include fullview.html

The second line defines the export file names of the full-view pages -- they will be called target0.html, target1.html, etc. The third line tells Picasa where to find the prototype html code, namely in the BI file called fullview.html.

The template is complete. When you choose this template, Picasa exports the album images into subfolders images and thumbnails in the export folder, then creates the thumbnails page and the full view pages in that same folder, and finally copies in the static assets.

Details

We skipped over a few details that we can cover by showing another html fragment. Photo captions are easy to add in Picasa, and we want these carried through to the web version of the album. Our header.html, thumbnail.html, and fullview.html contain variable names like "itemCaption" and "albumCaption". Picasa looks for these as it assembles the export files, and replaces "itemCaption" with the caption text for the image under consideration, and "albumCaption" with the album (or folder) description. Here is the listing for fullview.html, with some variable names highlighted:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Birch Island Gallery / <%albumCaption%> / <%itemCaption%></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="textreg">Birch Island Gallery / <%albumCaption%> <br />
<div class="textright"> <a href="../../gallery.htm">Back to Gallery</a></div>

<%if !isFirstTarget%><a href="<%firstTarget%>"><%endif%>First<%if !isFirstTarget%></a><%endif%> |
<%if isPrevTarget%><a href="<%prevTarget%>"><%endif%>Previous Picture<%if isPrevTarget%></a><%endif%> |
<%if isNextTarget%><a href="<%nextTarget%>"><%endif%>Next Picture<%if isNextTarget%></a><%endif%> |
<%if !isLastTarget%><a href="<%lastTarget%>"><%endif%>Last<%if !isLastTarget%></a><%endif%> |
<a href="<%referrer%>">Thumbnails</a>
<hr size="1" /></div>
<div class="photo"><p>
<a href="<%referrer%>"><img src="<%itemLargeImage%>" width="<%itemWidth%>" height="<%itemHeight%>"
title="<%itemName%> (large)" border="0" /></a><%itemCaption%></p></div>

</body>
</html>

This file gets replicated in the export folder, one copy per image. For each copy, Picasa substitutes image caption text for <%itemCaption%> and album description text for <%albumCaption%>. Other variables such as <%itemName%> are also substituted. See the Picasa Template documentation for a full list of variables.

Note the conditional code generation. The five lines:

<%if !isFirstTarget%><a href="<%firstTarget%>"><%endif%>First<%if !isFirstTarget%></a><%endif%> |
<%if isPrevTarget%><a href="<%prevTarget%>"><%endif%>Previous Picture<%if isPrevTarget%></a><%endif%> |
<%if isNextTarget%><a href="<%nextTarget%>"><%endif%>Next Picture<%if isNextTarget%></a><%endif%> |
<%if !isLastTarget%><a href="<%lastTarget%>"><%endif%>Last<%if !isLastTarget%></a><%endif%> |
<a href="<%referrer%>">Thumbnails</a>

generate "First | Previous Picture | Next Picture | Last | Thumbnails" links. We don't want the first full-view page to have "First" as an active link, so we generate a link on "First" only if the image under consideration is not the first. Similarly, there should be no link on "Next Picture" if there is no next picture. Logical variables like isFirstTarget are listed in the Picasa Template documentation.

Here is a listing of all seven text files including the css style sheet. The preview image, preview.jpg, is created using screen capture. For examples based on this template, see the Birch Island gallery with albums contributed by Bob Cavenagh, Keith Lennon and others. See also Photos by Evelyn Davidson, Daicar Sculptures, and several photo albums from Orland French's recent book, Heritage Atlas of Hastings County.

Other approaches

Here are some examples of other Picasa templates using frames, Flash, and javascript designs. Just download and install the templates then customize as desired. (Questions? Contact jpcurley@gmail.com)

For a frame design, try the Picasa supplied "Template 5. 1-page black background": left frame, scrollable thumbnails; right frame, full view image. This could be easily customized.
SimpleViewer uses a Flash viewer. To find a download site, Google "simpleviewer download template". This template generates XML read by the accompanying Flash viewer. The viewer is slick but seems to load an entire album at once, so it may not be suitable for large albums.
Thickbox uses javascript. Clicking a thumbnail brings up an overlay of the full image. Try the demo, and download it and other templates from its download site.

 

Other notes

The albums feature of Picasa is useful. Although Picasa keeps photos in directory folders, it allows photos selected from one or several folders to be added to an "album", a kind of virtual collection. Photos in an album can be captioned, edited, and sequenced. They can be deleted from the album without affecting the original in the folder. An album description is added by right clicking the album name and choosing "Edit album description". It is this description that gets passed through as albumCaption in the template.

Choosing "Album>Export as HTML Page" or "Folder>Export as HTML Page" brings up a panel asking for image sizes, etc. On this panel, one source of confusion is "Enter the title you want to appear at the top of the Web page". For user-defined templates like ours, it might better read "Enter an export folder name". The Picasa supplied templates use the export folder name in titles, but we use the album description field.

Using templates for slide shows

Templates can be used to render slide shows of albums, as shown on right. This slideshow uses javascript. See the full listing of template files. Here is the index.tpl file and a line-by-line walkthrough. A fade transition works from Internet Explorer.

index.tpl

#templatefile -v "1.0" -n "slideshow template" -d "Generates slideshow array."
define exportFileName index.html
define shadowedThumbnails 0
define imageWidth 250
define imageHeight 250
define thumbnailWidth 250
define thumbnailHeight 250
include header.html
loop images.html
include startcaptions.html
loop captions.html
include startwidths.html
loop widths.html
include startheights.html
loop heights.html
include footer.html
loop footer1.html
include footer2.html
copy assets\

The first few lines set maximum image width and height to 250px. We will use images, not thumbnails, in the slideshow. Some comments on the rest of the index.tpl code:

include header.html - the header info
loop images.html - add images to a javascript array
include startcaptions.html - end the images array and start the captions array
loop captions.html - add image captions to the captions array
include startwidths.html - end captions and start the widths array
loop widths.html - add image widths to the widths array
include startheights.html - end widths and start the heights array
loop heights.html - add image heights to the heights array
include footer.html - end heights and more javascript down to "initial image"
loop footer1.html - the initial image, produced if "isFirstImage" is true
include footer2.html - remainder of the html file
copy assets\ - copy style.css static file