Quick Creation of Photo Web Pages

Steven Dutch, Natural and Applied Sciences,University of Wisconsin - Green Bay
First-time Visitors: Please visitSite Map and Disclaimer. Use "Back" to return here.


I have a lot of pages with numerous photos. Unfortunately, there isn't any easy way to organize pictures en mass. I still prefer tables for organizing pictures, since I have yet to find anything in css that is an improvement. You can drag photo links one at a time into the table, which gets very tedious. You can also select a number of photo links and drag them in all at once, except they end up jumbled together.

The method here is a variation on converting Excel spreadsheets to HTML tables. You'll need to create a spreadsheet with the appropriate HTML tags and then insert the photo file names. We'll use Sheet 1 for the list of file names and Sheet 2 to create the HTML.

An easy way to find the correct HTML tags is simply to insert a photo onto your Web page, then switch to Code View and look at the code. For example, this picture:

Has  this code:

<img src="MakePan1.jpg" width="640" height="480">

Depending on where the photo is relative to your Web page, the link may also include directory information. So make sure everything is stored where you want it before starting.

If your photos are sequentially numbered, it's easy to create a file list.

  A B C D
1 IMG 1009 .jpg IMG1009.jpg
2 IMG 1010 .jpg IMG1010.jpg
3 IMG 1011 .jpg IMG1011.jpg
4 IMG 1012 .jpg =CONCATENATE(A2,B2,C2)
5   etc.    
       
7        

This obviously has to be tailored to your camera's file system. If you have leading zeros, you may need to add them to the prefix, for example, IMG0. Likewise, if you have a suffix on your file name, you can add it to the extension. For example, I suffix all my 640 x 480 pictures with "m" for "medium," so my column C would be "m.jpg" You can fill the numbers either using the Data Fill option or by just adding 1 to the cell above. For example, in B2 you'd enter the formula "=B1+1."

If your pictures are already in a storage system, and not sequentially numbered, you can capture the file list to a text file. Then copy the text file into your spreadsheet. There will generally be things you may or may not want like file sizes and dates, but the Text to Columns utility easily deals with those issues. The text file will be fixed width, making it easy to set column limits. Just erase any data you don't need.

Now, go to Sheet 2 of your spreadsheet. In columns A,C,E, etc., you put your HTML code, including the boilerplate for the photo link. I generally have one column of pictures and one for captions, so my HTML will look like this:

  A B C D E
1 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
2 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
3 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
4 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
5 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
<tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>
7 <tr><td><img src="   " width="640" height="480"></td><td>   </td></tr>

In columns B, you put references to the photo names. Say they're in Colum A on Sheet 1. Those quotation marks in columns A and C are extremely important since the links won't work properly without them. It also doesn't hurt to put a dummy entry into your captions column, since columns without content can be hard to get at.

  A B C D E
1 <tr><td><img src=" =Sheet1!A1 " width="640" height="480"></td><td> ### </td></tr>
2 <tr><td><img src=" =Sheet1!A2 " width="640" height="480"></td><td>   </td></tr>
3 <tr><td><img src=" =Sheet1!A3 " width="640" height="480"></td><td>   </td></tr>
4 <tr><td><img src=" =Sheet1!A4 " width="640" height="480"></td><td>   </td></tr>
5 <tr><td><img src=" =Sheet1!A5 " width="640" height="480"></td><td>   </td></tr>
<tr><td><img src=" =Sheet1!A6 " width="640" height="480"></td><td>   </td></tr>
7 <tr><td><img src=" =Sheet1!A7 " width="640" height="480"></td><td>   </td></tr>

The good news is you really only need to do this for the first row, then you can copy it into all the remaining rows.  Once you copy the formulas, your sheet will look like this:

  A B C D E
1 <tr><td><img src=" IMG1009.jpg " width="640" height="480"></td><td> ### </td></tr>
2 <tr><td><img src=" IMG1010.jpg " width="640" height="480"></td><td>   </td></tr>
3 <tr><td><img src=" IMG1011.jpg " width="640" height="480"></td><td>   </td></tr>
4 <tr><td><img src=" IMG1012.jpg " width="640" height="480"></td><td>   </td></tr>
5 <tr><td><img src=" IMG1013.jpg " width="640" height="480"></td><td>   </td></tr>
<tr><td><img src=" IMG1014.jpg " width="640" height="480"></td><td>   </td></tr>
7 <tr><td><img src=" IMG1014.jpg " width="640" height="480"></td><td>   </td></tr>

Last step, copy the table into your web page. Not into Design View because that's how all the formatting garbage gets inserted. Copy it into Code View so it goes into the HTML code exactly like it looks. You should have no problems even if all the cells aren't fully visible, but if cell contents do get truncated, go back and format the column widths in your spreadsheet. Add <table> at the beginning and </table> at the end. Better yet, define those tags first and copy the spreadsheet contents between them.

Your copied HTML code will have extra spaces ("white space"). That's usually no problem, although if it really annoys you, you can search and replace. Search for two consectuve spaces and replace them with one, and repeat until you get no more hits.

Now, save your spreadsheet. Next time you have photos to put into an HTML table, just insert the list of names into Sheet 1 (erase the existing data first) and copy Sheet 2 to your Web Page.

Even if you plan on splitting your pictures into several tables, it's far easier to create a single table and split it rather than try to create several different tables. Also, if you want to have side by side photos in places, it's much easier to move them in the finished table.

Yes, I know using tables this way is deprecated. If you prefer to use more orthodox styles like div, figure and figurecaption, just insert the preferred commands where I have table commands. If you can show me a way using CSS that's faster and allows me to move images and captions more easily, I'm all ears. Until then, feel free to deprecate.


Return to Computer Tips Index
Return to Professor Dutch's Home Page

Created 18 January 2002, Last Update 23 April 2014

Not an official UW Green Bay site