Using tokens in Web photo gallery styles

Photoshop uses tokens in the HTML template files that are used to define a default Web photo gallery style. The tokens enable Photoshop to generate a gallery based on user input in the Web Photo Gallery dialog box.

When customizing or creating a gallery style, you can add any token to any HTML template file, with the exception of %THUMBNAILS% and %THUMBNAILSROWS%, which can only appear in the IndexPage.htm file. When adding a token, keep in mind that you may also need to add HTML code to the file so that the token is used correctly.

You can use the following tokens in the HTML template files:

%ALINK%

Determines the color of active links.

%ALT%

Determines the name of an image file.

%ANCHOR%

Provides the ability to return to the thumnail of the image the user is viewing, rather than the beginning of the index. This takes effect when the user clicks the Home button.

%BANNERCOLOR%

Determines the color of the banner.

%BANNERFONT%

Determines the font of the banner text.

%BANNERFONTSIZE%

Determines the font size for the banner text.

%BGCOLOR%

Determines the background color.

%CAPTIONFONT%

Determines the font for the caption below each thumbnail on the home page.

%CAPTIONFONTSIZE%

Determines the font size for the caption.

%CHARSET%

Determines the character set used on each page.

%CONTENT_GENRATOR%

Expands to "Adobe Photoshop CS Web Photo Gallery."

%CURRENTINDEX%

Determines the link for the current home page.

%CURRENTINDEXANCHOR%

Resides in the subpage.htm and points to the first index page.

%DATE%

Determines the date that appears on the banner.

%FILEINFO%

Determines the image file information for a caption.

%FILENAME%

Determines the filename of an image. Use this for metadata that appears as HTML text.

%FILENAME_URL%

Determines the URL filename of an image. Use this for URL filenames only.

%FIRSTPAGE%

Determines the link for the first gallery page that appears in the right frame of a frame set.

%FRAMEINDEX%

Determines the link for the home page that appears in the left frame of a frame set.

%HEADER%

Determines the title of the gallery.

%IMAGEBORDER%

Determines the border size of the full-size image on a gallery page.

%IMAGE_HEIGHT%

Enables "Add width and height attributes for images" check box. This allows the user to download the attributes, producing faster downloads.

%IMAGE_HEIGHT_NUMBER%

This token is replaced by a numeral (only) representing the width of the image.

%IMAGEPAGE%

Determines the link to a gallery page.

%IMAGE_SIZE%

If the "Resize Images" box is checked, this token has the image pixel value in the "Large Images" panel. If the box is not checked, this token contains an empty string. This is useful for JavaScript in the templates, as it can show the maximum height and width values for all images for the generated site.

%IMAGESRC%

Determines the URL for a full-size image on a gallery page.

%IMAGE_WIDTH%

Enables "Add width and height attributes for images" check box. This allows the user to download the attributes, producing faster downloads.

%IMAGE_WIDTH_NUMBER%

This token is replaced by a numeral (only) representing the width of the image.

%LINK%

Determines the color of links.

%NEXTIMAGE%

Determines the link for the next gallery page.

%NEXTIMAGE _CIRCULAR%

Sets the link from large preview image to next large preview image.

%NEXTINDEX%

Determines the link for the next home page.

%NUMERICLINKS%

Inserts numbered links on subpages to all large preview images.

%PAGE%

Determines the current page location (for example, page 1 of 3).

%PHOTOGRAPHER%

Determines the name of the person or organization that deserves credit for the photos in the gallery.

%PREVIMAGE%

Determines the link for the previous gallery page.

%PREVINDEX%

Determines the link for the previous home page.

%SUBPAGEHEADER%

Determines the title of the gallery.

%SUBPAGETITLE%

Determines the title of the gallery.

%TEXT%

Determines the text color.

%THUMBBORDER%

Determines the border size for the thumbnails.

%THUMBNAIL_HEIGHT%

Enables "Add width and height attributes for images" check box. This allows the user to download the attributes, producing faster downloads.

%THUMBNAIL_HEIGHT_NUMBER%

This token is replaced with a numeral (only) representing the height of the thumbnail.

%THUMBNAILS%

This token is replaced with thumbnails using the Thumbnail.htm file for the frame styles. You must place this token alone in a single, nonbreaking line in the HTML file.

%THUMBNAIL_SIZE%

Contains the thumbnail pixel value in the "Thumbnails" panel. This is useful for JavaScript in the templates, as it can show the maximum height and width values for all thumbnails for the generated site.

%THUMBNAILSRC%

Determines the link to a thumbnail.

%THUMBNAILSROWS%

This token is replaced with rows of thumbnails using the Thumbnail.htm file for the nonframe styles. You must place this token alone in a single, nonbreaking line in the HTML file.

%THUMBNAIL_WIDTH%

Enables "Add width and height attributes for images" check box. This allows the user to download the attributes, producing faster downloads.

%THUMBNAIL_WIDTH_NUMBER%

This token is replaced by a numeral (only) representing the width of the thumbnail.

%TITLE%

Determines the title of the gallery.

%VLINK%

Determines the color of visited links.

Important: When customizing or creating a template for a gallery style, you should place each of the following tokens on a separate line in the HTML file: %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE%, and %PREVINDEX%. When generating specific pages of a gallery, Photoshop skips lines in a template that contain tokens that don't apply to those pages. For example, when Photoshop generates the first gallery page, it skips any line in the template that contains the %PREVIMAGE% token, which determines the link to the previous gallery page. By keeping the %PREVIMAGE% token on a separate line, you ensure that Photoshop doesn't ignore other tokens in the template.