Building a Web Gallery Using Photoshop

The Web Photo Gallery tool, found under the Automate menu item enable you to automate the creation on on-line photo or art galleries. The photo galleries on this site were created with this tool.

Typically the directory where the templates can be found is:

\Program Files\Adobe\Photoshop\Presets\WebContactSheet

There are a number of templates, and for this web site I have adapted the "Simple" template.

First copy the template files from the Simple directory to a new directory that is going to hold your new set of template files. The name of this new directory will appear in the Photoshop list of templates.

In the "Simple" template there are four template files:

• IndexPage.htm - This is the main index page for each gallery and defines the body of the page, including any headers and footers. If there are more thumbnails than can fit on a page a 2nd or 3rd page is created to hold the additional thumbnails.
• Thumbnail.htm - This template generates the HTML code for each thumbnail in the index page.
• Caption.htm - This template generates the HTML code for the Caption associated with each thumbnail in the index page.
• SubPage.htm - This template generates one page for each image in the gallery and is linked to from the index page.

Each template contains a number of placeholders, identified by '%' symbols (for example %TITLE%), that are replaced with parameters specified in the Web Contact Sheet dialog or extracted from the image files (such as filename).

IndexPage.htm

All the other placeholders are generated automatically by the system.

The main one of interest is %THUMBNAILROWS% - this loads the template Thumbnail.htm and Caption.htm for each image thumbnail that is displayed. The parameters for these templates are covered in later dialogs.

This dialog controls the main images loaded by clicking a thumbnail image.

The Titles Use check boxes control which of the fileds, eneterd in the Banner dialog, are displayed on the main picture page.

This dialog controls:

• The format of the thumbnail - number of thumbnails per row and number of rows
• the size of the thumbnail images.
• The captions displayed for each thumbnail, as controlled by the Titles Use check boxes

This dialog controls the colours used for each element. You can ignore this, as I have, if you set such things via a CSS files.

Each image can have a watermark imprinted on it. The text to be added, its size, font, colour, opacity, position and orientation are covered by this dialog.

By selecting different elements in the Content field, you can select additional fields, such as filename and caption, to be added to the watermark.

Footnote

The specific look and feel created with the templates used on this site, and the text of this article is Copyright © 2002 Chris Owens.

Building a Remote Control for the HHB Portadisc