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.
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.
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.
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. |
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.
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 |
|
|
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 |
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:
<!-- ##INCLUDE## js.htm -->
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.
<!-- ##TABLE## -->
(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.