HTML template code for a simple website photo gallery

Web design software sometimes includes an automated method for creating an image gallery. The Microsoft FrontPage 2003 Photo Gallery Web Component works well enough, but I soon encountered some inconvenient quirks and wanted more flexibility:

• It was easy to resize thumbnails smaller, but resizing them bigger meant deleting them from the gallery, re-adding them, and moving them back into their proper position in the gallery.
• It puts vertical bar borders between the images, which look even worse in Firefox than in IE, and apparently can't be omitted.
• Caption text with customized formatting didn't display properly on the page.
• The "caption" and "description" text entries are two different things, and you have to open the Properties dialog box to edit them.
• The HTML code generated for the gallery is buried in a set of "include" pages managed by FrontPage. If I modified the code in those pages directly, my changes would be overwritten if I modified the gallery's contents.

I wanted a simple procedure I could reuse for creating simple photo galleries, while retaining the ability to directly modify the HTML code. I wanted it to be secure from hacking, as automated as possible in its setup, and easily modified. Was it possible? Yes. It was incredibly easy!

The difference between my method and others is that others automate the entry of the file names but force you to do other things step-by-step manually. My method requires you to enter the file names manually, but uses batch processing for everything else, which turns out to be easier. The Mt. Shasta photo gallery page (only the page layout itself) was created in about 30 minutes.

Overview

A gallery basically consists of a set of thumbnails that link to the full sized images. Caption text for the thumbnails is optionally added.

The source images are usually .BMP files. To use them on your website, you need .JPG files, so you must convert them. Then you must also generate the thumbnail .JPG images at the size(s) you want. Then you must get the thumbnail images placed on the page at the locations you want, properly linked to their respective full sized images.

The method below requires being comfortable with working with the HTML of your web page, but it only requires a small amount of knowledge of HTML, which is all I have. It demonstrates that there are some things that are much more easily done in HTML than in WYSIWYG.

The procedure might not look easy at first, but after you've tried it once, you'll see it's much easier than the so-called automated photo galleries, and the end result is a pure HTML page over which you have complete control when you want to change things.

These instructions refer to FrontPage, but they will work with any program.

Photo gallery template instructions

The following simple table is a starting template for an image gallery. The basic layout is for one image, consisting of 2 rows (a picture with a caption beneath). You duplicate the basic layout to create as many columns and then as many rows as you need.

1. In Microsoft Picture Manager, export (into a separate folder) all your images from BMP to JPG in their original size (or whatever size you want to use). You can do them all at once. Edit > Select All, then File > Export. Be sure to use all lowercase file names with no spaces.
    
2. In Microsoft Picture Manager, also export (into a different folder) all your images from BMP to JPG in their thumbnail sizes. They can be different sizes if you want. Do same-sized ones in batches and unique ones individually. It will help stay organized if you use the same names for the originals and their thumbnails, distinguishing between them by keeping them in separate folders.
    
3. Import your full size images, and your thumbnail images, into their respective FrontPage folders where they will reside in your website.
    
4. Make a copy of the table below.
    
5. Replace IMAGEPATH with the true relative path to the full size photos.
    
6. Replace THUMBPATH with the true relative path to the thumbnails.
    
7. Replace the ALT text with whatever repetitive text you want to use, or delete it. You can customize individual ALT entries later.
    
8. Do some math: Given the width of your web pages, the width of your thumbnail images, and the amount of space you want between them, calculate how many thumbnails will fit on a row.
    
9. Change the width= attribute in two places to reflect how many thumbnails are in each row. The example code below uses width=25%, for 4 thumbnails on a row.
    
10. Inside the FIRST table row, create as many copies of the tabledata (the <td></td> tags and everything between them) as you want COLUMNS.
     
11. Create the same number of duplicate tabledatas inside the SECOND row, to match.
     
12. COPY the entire first TWO tablerows (i.e. the entire table contents) and paste where indicated (inside the table) to create as many copies as you want ROWS in your table, enough to accomodate all the pictures. (Actually, you will notice that each "picture" row actually consists of two table rows.)
     
13. Now, while referring to your list of images (file names) in the FrontPage Folder List Pane, and starting at the top of the template table you just created, double-click each "00000" string in the HTML code and replace it with the next filename in the list. You will need to enter each filename twice, once for the full size photo and once for the thumbnail in the line just below it.
     
14. Add captions, either in HTML view or in WYSIWYG view in the table cells beneath each picture.
     
15. Customize the ALT text for individual photos as desired.
     
16. If you want the images to be displayed in multiple sets, broken into sections with text between, split the table apart into multiple tables, and insert the paragraph text wherever you want.
     
17. If you want one thumbnail to occupy more column width than normal, you can also do this by splitting the table. The Mt. Goddard photo gallery has examples of multiple tables being used for two purposes: 1) There are two sets of photos. 2) In one of the rows, one of the pictures consumes 50% of the page width instead of 25%. This was done by putting that row into its own table in which the column widths were 50%, 25%, 25%. The tables (above and below) containing the other pictures in the set are spaced as 25/25/25/25. Use your browser's View Source feature to see the HTML code for that page.

The HTML table code

The <!-- MSTableType="layout" --> comment line is for FrontPage only. When present, it affects how the table behaves while you edit it in Design View. When the mouse hovers over the border of the table, row, or cell, a green or blue line highlights the border. Clicking on the highlighted border displays width and height attributes and allows you to change size or position by dragging. If this behavior interferes with other editing you want to do (such as selecting a table row), or if you're not using FrontPage, leave that line out.

Annotated version:

<table cellpadding="0" cellspacing="10" width="100%">
<!-- MSTableType="layout" -->

<!-- THIS BEGINS THE FIRST TABLE ROW. -->
<tr align="left">

	<!-- TD DEFINES A TABLE CELL (TABLEDATA). -->
	<td valign="bottom" width="25%">
	<a href="IMAGEPATH/00000.jpg">
	<img src="THUMBPATH/00000.jpg" border="0" alt="Click."></a>
	</td>
	<!-- THE END OF THE TABLE CELL -->

	<!-- 1) TO CREATE MORE COLUMNS, COPY THE TABLEDATA BLOCK ABOVE. -->
	<!--    PASTE IT HERE AS MANY TIMES AS NEEDED. -->
	<!--    THAT WILL CREATE ADDITIONAL COLUMNS IN THE FIRST ROW. -->

</tr>
<!-- END OF THE FIRST TABLE ROW -->

<!-- THIS BEGINS THE SECOND TABLE ROW. -->
<tr align="left">

	<!-- THESE TABLE CELLS (TABLEDATA) ARE THE PHOTO CAPTIONS. -->
	<td valign="top" width="25%">Caption.</td>
	<!-- END OF THE TABLE CELL -->

	<!-- 2) ALSO COPY THE TABLEDATA BLOCK ABOVE, -->
	<!--    AND PASTE IT HERE THE SAME NUMBER OF TIMES, -->
	<!--    SO YOU HAVE THE SAME NUMBER OF CAPTION CELLS AS PHOTO CELLS. -->

</tr>
<!-- END OF THE SECOND TABLE ROW -->

<!-- 3) THEN, TO CREATE MORE ROWS, COPY BOTH ENTIRE ROWS ABOVE. -->
<!--    (everything from "THIS BEGINS THE FIRST TABLE ROW" -->
<!--     to "END OF THE SECOND TABLE ROW") -->
<!--    PASTE THEM HERE AS MANY TIMES AS NEEDED. -->
<!--    THAT WILL CREATE ADDITIONAL ROWS IN THE TABLE. -->

</table>

Minimal version, no comments:

<table cellpadding="0" cellspacing="10" width="100%">
<!-- MSTableType="layout" -->

<tr align="left">

	<td valign="bottom" width="25%">
	<a href="IMAGEPATH/00000.jpg">
	<img src="THUMBPATH/00000.jpg" border="0" alt="Click."></a>
	</td>

</tr>

<tr align="left">

	<td valign="top" width="25%">.</td>

</tr>

</table>

Comments or assistance with HTML in the discussion forum.