Customizing the Album Template

You can exercise a lot of control over how your albums appear with the various options in the Album Properties dialog. To go further, you can modify the HTML and JavaScript templates that Albumatic uses internally. As you would expect, this route is only for advanced users who know HTML and JavaScript pretty well.

Location of Modified Templates

If you modify a template but keep it in the directory that contains the Albumatic program (albumatic.exe), it will apply to all albums. (You need to rebuild any existing albums to take advantage of your changes.) If, however, you put it in an album directory, the modified template applies to that album only. If you put it in the parent of an album directory (i.e., the library directory), it will apply to all child album (sub)directories that don't have their own templates.

To say it another way, when Albumatic is looking for a template, it looks first in the album directory, next in the parent of the album directory, and finally in the directory that contains albumatic.exe.

If you do modify any templates shipped with Albumatic, be sure to keep a copy of the originals in case you need them.

A modified template has to have the same name as the original. That is, if you modify template.htm, the result still must be called template.htm.

Generated HTML Files

The following table lists the files generated by Albumatic when you build an album and where the files come from. These files are among the ones uploaded to your FTP site when you publish an album. In addition, original and background image  files may be uploaded depending on how you've chosen your album properties

File Purpose Source
index.htm Primary (home) album page. Normally named index.htm, but you can change its name via the Album Properties dialog. Split-Page albums: frameset.htm

Two-Page albums: template.htm, templatejs.htm

toc.htm Index-view HTML for Split-Page albums; not used for Two-Page albums. template.htm, templatejs.htm
empty.htm Placeholder for empty frames, used for Split-Page albums only. empty.htm
enlfr.htm Frameset for enlargement view; used when navigation controls are present. framesetenl.htm
ctl.htm Navigation controls. templatectl.htm
enl.htm Enlargement view. templateenl.htm
albstyles.css Cascading style sheet. templatestyle.css
S_*.jpg Thumbnails (or other small images) for index view. Original image files.
L_*.jpg Images for enlargement view. Original image files.
timestmp.bin Time-stamp file for efficient uploading. None.

The index.htm and toc.htm files need further explanation: With Split-Page albums, frames are used, so the primary HTML file (index.htm, unless you change the name) contains only a definition for the frameset, and the primary HTML is in another file, toc.htm, which is generated from template.htm. But, with Two-Page albums, there is no frameset, and index.htm (generated from template.htm) contains the primary HTML directly.

The file templatejs.htm contains JavaScript. It isn't uploaded to your Web site, but is embedded directly in the primary HTML file. Also, you may notice an intermediate file named js.htm that Albumatic uses internally when expanding macros that appear in the templatejs.htm file. You needn't be concerned with it unless you're trying to track down JavaScript problems.

Template Files

The following table lists the various template files in the previous table and summarizes what potential modifications you can make to them:

File Modifications
template.htm Overall layout of the index view and what information and images it contains.
templatejs.htm All JavaScript used to generate the title page, the enlargement view, and other HTML. If you know what you're doing, you can make vast changes to Albumatic's behavior.
templatestyle.css The Cascading Style Sheet used by Albumatic. It's the first thing you should modify if you want more control over the style than you can get via Album Properties.
frameset.htm Few modifications are useful, as this only defines the frameset.
framesetenl.htm Frameset for enlargement view.
templatectl.htm Template for navigation control frame.
templateenl.htm Template for enlargement view.
empty.htm None, as this file should always contain an empty page.

Macros

Template files (template.htm, templatejs.htm, and templatestyle.css) can contain macros that cause Albumatic to replace various pieces of text with other text that's specific to the album generated. For example, the macro

<!-- ##DATE## -->

is replaced by the current date.

The following table lists all of the macros implemented by Albumatic. Note that some of them aren't used in any current templates, and may not even be useful, but they still work if you want to use them in your own templates; they are mostly left over from earlier Albumatic versions. In most of these cases what the macro used to do is now done by JavaScript so as to give you more control over the result. For example, you can now easily change the text "Click picture to see enlargement" to German, which wasn't possible before.

Macro Description
<!-- ##BODYLEAD## --> <BODY> and its associated attributes. Does not include </BODY>, which must appear by itself. No longer used.
<!-- ##TITLE## --> Title. No longer used; the PROP macro is used instead.
<!-- ##DESC## --> Description.
<!-- ##DESC_Q## --> Description with special characters quoted and enclosed in double quotes.
<!-- ##INSTRUCTIONS## --> The "Click a picture..." instruction. No longer used, as the text is generated by JavaScript.
<!-- ##TABLELEAD## --> <TABLE> and its associated attributes. Does not include </TABLE>, which must appear after <!-- ##TABLE## -->. Not used.
<!-- ##TABLE## --> Table of photos, except for the <TABLE> and </TABLE> tags, which must appear in the template. Important when you make a template with an HTML editor.
<!-- ##EMAIL## --> Email phrase ("Mail comments..."). No longer used, as the text is generated by JavaScript.
<!-- ##DATE## --> Date.
<!-- ##TIME## --> Time.
<!-- ##INSTRUCTIONS_TITLE_PAGE## --> The "Click here for title page" instruction. No longer used, as the text is generated by JavaScript.
<!-- ##LIBLINKS## param --> The phrase "More Albums" and the list of links to other albums in the library. The text "More Albums" or whatever you want appears as the parameter param.
<!-- ##LIBLINKS_END## --> Marks the end of the list of album links.
<!-- ##PROP## param --> Value of the text property param. See below for list of properties.
<!-- ##PROP_ESCAPE## param --> Same as ##PROP##, but special characters apostrophe, percent, and double quote are escaped. In templates, use the JavaScript function unescape to restore the actual characters.
<!-- ##PROPINT## param --> Value of the integer property param. See below for list of properties.
<!-- ##PROPCOLOR## param --> Value of the color property param, either a name or a hex value. See below for list of properties. 
<!-- ##INCLUDE## param --> Inserts contents of file param. This is done during album building by Albumatic, not by the Web server or the browser.
<!-- ##PHOTO_DATA## --> Inserts JavaScript code to build arrays of photo data. Used in templatectl.htm.
<!-- ##PHOTO_COUNT## --> Number of photos in the album.

For examples of how these macros are used, look at the files template.htm, templatejs.htm, and tempatestyle.css.

Properties

The PROP, PROPINT, and PROPCOLOR macros are used to access the values of properties, as shown in the following table. The middle column indicates whether the value is text, an integer, or a color; you have to use the macro PROP, PROPINT, and PROPCOLOR that corresponds to the type of value.

Property Type Description

Desc 

text description

Email 

text email address

EnlBgColor 

color enlargement background color

EnlBgURL 

text enlargement background image URL
EnlJPEGQual integer enlargement JPEG quality (0 - 10; 0 = Auto, 1 = 10, 2 = 20, etc.)
EnlNav integer Show navigation controls? (0 = no; 1 = yes)

EnlPhotoCaption 

integer Show photo captions and labels in enlargement view? (0 = no; 1 = yes)

EnlPhotoSizeCustom 

integer enlargement custom size in pixels

EnlPhotoSpec 

integer enlargement photo size (0 = none; 1 = thumbnail; ...; 8 = original; 9 = custom)

EnlTextColor 

color enlargement  text color

HTMLFile 

text HTML file name

IdxBgColor 

color index background color

IdxBgURL 

text index background image URL

IdxBrdrColor 

color index table border color

IdxBrdrSize 

integer index table border size

IdxCellPad 

integer index table cell padding

IdxCellSpace 

integer index table cell spacing

IdxColAuto 

integer index table automatic columns? (0 = no; 1 = yes)

IdxColCnt 

integer index table column count

IdxJPEGQual 

integer index JPEG quality (0 - 10; 0 = Auto, 1 = 10, 2 = 20, etc.)

IdxPhotoCaption 

integer show photo captions in index view? (0 = no; 1 = yes)

IdxPhotoFileName 

integer show photo file names in index view? (0 = no; 1 = yes)

IdxPhotoLabel 

integer show photo labels in index view? (0 = no; 1 = yes)

IdxPhotoSpec 

integer index photo size (0, 1 = thumbnail; ...; 8 = original)

IdxTblBgColor 

color index table background color

IdxTextColor 

color index text color

LibLinks 

integer is album in library? (0 = no; 1 = yes)

LibName 

text library name 

Name 

text album name

StyleSplitPage 

integer is style split-page? (0 = no; 1 = yes)
Subdir text subdir as specified in album properties dialog

Title 

text album title

Creating a Template with an External HTML Editor

The primary template supplied with Albumatic, template.htm, was created by hand, but you can also create your own template with any HTML editor or web publishing program such as FrontPage, with only a minimum of required special coding that must be inserted:

Note that the file to be included is js.htm, not templatejs.htm, as you want the result after macros in the JavaScript code are expanded, not before.

(Strictly speaking you don't really have to do this, but if you don't the result really isn't an Albumatic album.)

<link rel="stylesheet" type="text/css" href="albstyles.css">

Typically, you use whatever capability your web publishing program has for inserting raw HTML into your document to put in the required macros. The JavaScript must go into the header (between <head> and </head>), and the table goes into the body, wherever you like. In practice, what you do is design the page first to your liking and then insert these two macros.

Important: You must name the resulting HTML template.htm and put it in the album directory.

You're also free to put as many additional Albumatic macros into your page, but the two listed above are the absolute minimum. If you don't put in the LIBLINKS macro you can still put the album into a library, in which case Albumatic will put in the macro automatically. But, you may not like where Albumatic puts it, so it's probably better to put in the LIBLINKS macro yourself.