HTML template code for a simple website photo gallery, with step by step instructions

Also on this page: online calculator to auto-generate photo gallery code by the method described in the article.

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. 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 table rows (a picture in the top row, with a caption in the row beneath). You duplicate the basic layout to create as many columns as you want in 1 row, and then duplicate that row to create as many rows as you want in the table.

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 path to the full size images.
    
6. Replace THUMBPATH with the true path to the thumbnails.
    
7. Replace the ALT and TITLE text with whatever repetitive text you want to use, or you can change them to empty strings (=""). You can customize the ALT and TITLE entries for the individual images later. When the page is published and you hover the mouse pointer over the thumbnail image, Internet Explorer pops up the ALT text, but Firefox and Chrome pop up the TITLE text. To get the same behavior in all the browsers, use  the same text for ALT and TITLE. For your HTML to be valid (conforming to the HTML specification), the ALT tag is required to be there, but the TITLE tag is not.
    
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. (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 and TITLE 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 put the paragraph text between them. You can terminate the top table early by inserting table-ending code after a closing </tr> tag, then start a new table by copying and pasting the same text that was used to start the top table. For example:
    
    </tr>
    </table>
    
    <p>Then put your paragraph text here. After it, insert HTML code to
    give the table below it a proper beginning:</p>
    
    <table cellpadding="0" cellspacing="10" width="100%">
     
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" title="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" title="Click"></a>
	</td>

</tr>

<tr align="left">

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

</tr>

</table>

Online calculator auto-generates HTML photo gallery code

This calculator does many of the above steps for you. Fill in the blanks and click Generate. When it's finished, the tab-indented HTML text is automatically selected for copying and pasting. Then put the file names in their slots as described above, add captions, customize the ALT and TITLE text, and you're done. If the generated HTML contains something you want to change but for which there wasn't an option to do it automatically, it might be fairly easy to do with the online text editor.

Comments or assistance with HTML in the discussion forum.