25 Years of Programming
An open source source for C, C++, OWL, BASIC, MDB, XLS, DOT, and more...
HTML template code for a simple website photo gallery, with step by step instructions
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:
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.
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.
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.
<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>
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.
Copyright ©2012 Steven Whitney. Last modified Sun 07/29/2012 10:51:51 -0700.