The Picasa Web Templating System

Overview

When the user does a web page export from the current album in Picasa, the Picasa Web Templating system is used to produce the desired HTML output. Web templates may be either template command (.tpl) files, or files which contain HTML formatting and special templating-system variables (typically with the extension .html)

During an export, thumbnail and large-sized copies of the selected images are written to the "thumbnail" and "image" subdirectories of the selected export directory, respectively. Then, the top-level template command file (always "index.tpl") in a template directory is processed and the commands executed in order. The special loop and targetloop commands are processed for each image in the selection, populating the special image loop and targetloop variables.

Features which have not yet been implemented are indicated like this.

Template Command (.tpl) Files

Template File Commands
CommandParametersDescription
define
variableNameThe name you'd like to use elsewhere
variableValueThe value to substitute in
Define a value which will be used internally by the exporter, as well as replaced automatically wherever <%variableName%> is encountered. Example: define imageWidth 600 -- sets the default image width of exported images to 600 pixels, and replaces any occurances of <%imageWidth%> with "600".

At any given time, only one instance of a variable is active, so placing a "define imageWidth 400" on any line below "define imageWidth 600" will override all instances of the imageWidth definition.

Some variables are used internally to control export behavior. They are listed in their own table below.

include
fileNameAn HTML or template file to include at this point.
Template files are processed recursively, variables are substituted in HTML files at the point where they are included.
loop
per-image include fileThis file will be included once per image.
columnCountThe number of images to place in a single row (usually of a table). If this parameter is specified, then you must also specify the rowStartInclude and rowEndInclude parameters
rowStartIncludeinclude this file at the start of each row (for example, "<TR>")
rowEndIncludeinclude this file at the end of each row (for example, "</TR>")
The loop and targetloop commands both loop over all the images in the export selection. Certain variables (indicated below) are active only for files included via the loop directives.
targetloop
target template fileTemplate file which specifies the export for the per-image HTML file.
target include fileIn the current export file, this file is included once per image, with the special variable <%targetPath%> defined, which points to the per-image export file.
columnCountThe number of images to place in a single row (usually of a table). If this parameter is specified, then you must also specify the rowStartInclude and rowEndInclude parameters
rowStartIncludeinclude this file at the start of each row (for example, "<TR>")
rowEndIncludeinclude this file at the end of each row (for example, "</TR>")
targetloop causes each image to be exported to a separate file, which may be referenced by the current file. It is used for frame-based designs.
copy
sourceA directory, relative to the current template, to copy recursively to destination
destination(optional) A path relative to the current export directory to which the files in source are copied
Copies static resources (such as artwork) from the template directory to the export directory. Example: copy assets\images\ images\ -- copies the contents of the "images" directory in the "assets" directory of the current template to the "images" directory of the current export. Note that the trailing backslashes are required for directory specifications, and that leading backslashes should not be used.

Command Variables

Some variables are used internally by the exporter (they are also accessible within the HTML).

Command Variables
Variable NameDescription
exportFileNameName to use for the exported file. For targetloop files, a numerical value will be appended to this name, before the extension. In other words, for a regular template file a value of "index.html" will produce an exported file named "index.html" but for a targetloop template, the files "index0.html," "index1.html," etc. will be produced.
imageWidthMaximum image width to use when generating the large-sized image files. A value of "0" means "Same width as the original image."
imageHeightMaximum image height to use when generating the large-sized image files. A value of "0" means "Same height as the original image."
thumbnailWidthMaximum image width to use when generating the thumbnail image files. A value of "0" means "Same width as the original image."
thumbnailHeightMaximum image height to use when generating the thumbnail image files. A value of "0" means "Same height as the original image."
bgColorColor to use when creating shadows around thumbnails. Default is white ("#FFFFFF")
shadowedThumbnailsIf set to "true" or "1", draw a shadow around each exported thumbnail. Defaults to "1"
shadowedImagesIf set to "true" or "1", draw a shadow around each exported image. Defaults to "0"

Included HTML Files

The following variables will be active for any page:
Album variables
Variable NameDescription
albumNumberA number which is unique across all albums in this instance of the Picasa database. Sometimes useful for javascript.
albumNameThe short name assigned to this album. Initially the name of the directory that contained the album's images, but editable by the user.
albumCaptionA description of the photographs that the user has entered.
albumDateInitially, the median date of all photos in the album. May be changed by the user. Formatted as month/year only.
albumItemCountTotal number of images in this album.

Within an image loop, (including any files exported within a targetloop) the following variables will be active in addition to the album variables above:

Image Loop Variables
Variable NameDescription
itemNumberA number which is unique across all albums in this instance of the Picasa database. Sometimes useful for javascript.
itemNameThe name of the image file ("mypicture.jpg")
itemOriginalPathThe full path to the original file on disk ("C:\My Documents\My Pictures\mypicture.jpg").
itemWidthActual width of the exported picture, in pixels. Usually smaller than the "imageWidth" command variable.
itemHeightActual height of the exported picture, in pixels. Usually smaller than the "imageHeight" command variable.
itemSizeSize of the original image, in kilobytes.
itemThumbnailImagePath to the exported thumbnail image file, relative to the export directory.
itemLargeImagePath to the exported large image file, relative to the export directory.
isNextImagetrue if there is an image following the current image
isPrevImagetrue if there is an image preceding the current image
nextImagePath to the next exported image, in sequence, relative to the export directory.
prevImagePath to the previous exported image, in sequence, relative to the export directory.
nextThumbnailPath to the next exported thumbnail image, in sequence, relative to the export directory.
prevThumbnailPath to the previous exported thumbnail image, in sequence, relative to the export directory.

Within a target page, the following variables will be active in addition to the album and image loop variables above:

Target Page Variables
Variable NameDescription
referrerPath to the page which points to this page (so you can implement a "back" link)
isNextTargettrue if there is a target following the current target
isPrevTargettrue if there is a target preceding the current target
isFirstTargettrue if the current target is the first one
isLastTargettrue if the current target is the first one
nextTargetpath to the next target file in sequence
prevTargetpath to the previous target file in sequence
firstTargetpath to the first target file in sequence
lastTargetpath to the last target file in sequence
outputIndexNumber within the total number of images represented by this page (i.e. "5"). Used for creating the export filename, but useful inside HTML.

Within a targetloop (in a containing page) the following variables will be active in addition to the album and image loop variables above:

Target Loop Variables
Variable NameDescription
targetPathpath to the exported target page

Conditional variables can be used for optional inclusion of text -- for example, if you want to deactivate a "previous" button on the first image of a set. Any conditional variable can be preceded by "!" which reverses its meaning.

Conditionals are used like so

<%if isNextImage%>Some HTML goes here<%endif%><%if !isNextImage%>(no more images)<%endif%>