How to:

• create a photo gallery or photo album for your website

• Thumbnails pictures - when clicked will cause a larger version of the photo to be displayed

Step 1 - You need a photo editing program

You need some sort of photo editing or image editing program. This program is needed to create thumbnails, or smaller resolution versions of your photographs. I will describe the procedure for using Photoshop CS3 (since that is what I have), but you are free to use any other photo editor if you wish. A number of free photo editing programs can be found on thefreecountry.com's Free Image and Photo Editing Programs page. Note, though, if you use a different photo editor from me, the exact method to generate a thumbnail will be different. But since the basic principles are the same, you're not totally on your own.

Step 2 - Creating the Thumbnails

The first thing you'll need to do is to create a thumbnail of your picture. A thumbnail, as you have probably surmised, is merely a smaller version of your picture. To create the thumbnail, we will use a photo editor to resize a copy of our image.

As mentioned earlier, the procedure below was performed using Photoshop. If you use a different program, just look at the main heading for each step and use the equivalent procedure in your software.

Step 3 - Make a copy of your photo

The first thing you should do is to make a copy of your photo and work on that copy. This is purely a precaution, in case you accidentally overwrite your original photo with your thumbnail. If you have many photos or pictures for which you want to create thumbnails, create a new folder and copy all the photos into that folder.

(If you use Windows, remember not to drag the photos from one folder to another. If both folders are on the same drive, you'll be moving the photo instead of copying it. Instead, select the photos, right click them and select "Copy". Go to the new folder, right click and select "Paste".)

Step 4 - Open the picture in your image editor

To load the picture you are going to resize in Photoshop, click "File | Open" and select the image. Note that "File | Open" means click the "File" menu, followed by the "Open" item on the menu that appears. I shall use this same kind of shorthand to describe the procedure for clicking various menu items in the rest of this article.

Step 5 - Resize the image

Select "Image | Image Size". An "Image Size" dialog box will appear. The default width and height given in the window is the current dimensions of your image. Since you want to create a thumbnail of your picture, enter a smaller number into either the width or height box.

Notice I said to enter only one of the new dimensions, that is, either the width or the height. If the check box for "Constrain Proportions" (somewhere in the lower half of the same dialog box) is selected, Photoshop will automatically calculate the other dimension. This way, things depicted in your photo will remain proportionate. If you prefer to manually specify both the width and height, and don't mind a distorted picture (where a person or object in your picture may appear too fat or too tall) uncheck "Constrain Proportions".

For those who are not sure how big a thumbnail should be, let me assure you that there is no "standard" for thumbnail sizes. It's up to you. Basically, just apply the common sense rules of making sure that your thumbnail can fit into your current web design, as well as being small enough so that your page can load fast. Pictures that are very big will take a long time to download, slowing down the display of your web page.

Step 6 - Save the image

Select "File | Save As" and save the image under a new name. Other than the name, accept the defaults provided by Photoshop for your image if you're prompted when trying to save the file, unless you have specific preferences.

Some notes about filenames:

Make sure you have a way to distinguish between your original photo and your thumbnail. Either save all your thumbnails in a folder specifically for thumbnails (for example, name it "thumbnails"), or add a little suffix to your filenames (for example, the thumbnail version of "photo.jpg" can be called "photo_small.jpg").

Of course there is nothing to stop you from naming your files whatever you like, or placing them anywhere you want. But you'll appreciate what I said about the naming conventions in the future, when you have hundreds of files to prune or maintain. By then, if you don't have a standard naming convention, you'll have forgotten which file is which, and will have to go through every single file just to find out which is the thumbnail and which is the original.

Do not put spaces in your filenames. And don't use capital letters (uppercase). Spaces and capital letters can cause problems for your site in the future. Even if you consistently and correctly encode all your spaces in your web addresses, and use the correct case, others linking to your site may not, leading to all sorts of problems. If you don't fully understand my previous sentence, you should definitely not put spaces in your filenames, nor use capital letters.

Repeat the procedure for your other images.
If you have more than one picture, do the same thing for the other photos.

Step 7 - Inserting Your Image and Links in Dreamweaver

Now that we have the thumbnail, we will use it to link to the full picture in Dreamweaver.

Step 8 - Copy your images into your web folder

This step is very important. Before you can modify your web page to include the thumbnails and photos, you will need to copy both the set of full-sized photos and their thumbnails to a folder within your local copy of your website. For example, if all the files for your website are currently kept in "c:\Documents and Settings\thesitewizard\My Documents\My Website", create a new folder within "My Website" and copy all your images there.

Note that when I say "your local copy of your website", I mean the copy of your web pages that are currently saved on your own computer and not the one on your web host. It's the copy that you usually work on in Dreamweaver before you publish it to your site. Your pictures must be copied to a sub-folder somewhere within this local copy. Otherwise when you link to it in Dreamweaver, you will get errors. And when you upload your page to your website, you will find that the pictures are not automatically uploaded. The end result is that you will have a web page where none of the photos appear.

Once again, let me emphasize that this step is very important.

Step 9 - Load your web page

Load the page where you want to insert your thumbnail. If you're creating a new page and you want your photo gallery page to have the same basic layout and design as the rest of your site, make sure you create the new page from your site's template (assuming you're using one).

Step 10 - Insert the thumbnail

Move your cursor to the portion of the page where you want the thumbnail to be. Select "Insert | Image". In the "Select Image Source" dialog box that appears, find the thumbnail you created earlier, and click OK. When prompted, enter a brief description of your picture in the "Alternate text" field. This description is useful for accessibility purposes as well as to make your site more search engine friendly.

Step 11 - Make the thumbnail into a clickable link

Move your mouse over the picture, and click your right mouse button. In the menu that appears, select "Make Link". In the dialog box that appears, select the full-sized picture that corresponds to your thumbnail. Click the OK button.

Step 12 - Save and Publish the Page

When you're through, save the publish the page in the usual way. Load your site with your web browser, and test that page by clicking the thumbnail. You should be able to see a bigger version of that picture.

Incidentally, if you get error messages from Dreamweaver telling you that "The file is outside the root folder of site 'Whatever-the-name-of-your-site-is' and may not be accessible when you publish the site" when you insert your thumbnail or make it into a clickable link, it means you did not follow my first step of copying the images into your website's folder.

A Faster Way of Creating Multiple Thumbnails and a Complete Photo Gallery Site (Photoshop CS3 Users Only)
If you use Photoshop CS3, there is a faster way of creating thumbnails for all your photos, especially if you have many photos to process. In fact, Photoshop will even create a basic photo gallery web page for you. Of course, you don't have to use the created web page if you don't want to -- just grab all the thumbnails it generates and insert them in Dreamweaver as described above. Or, if you like the basic functionality of the Photoshop-generated web page but want to spruce it up, you can also load and edit it with Dreamweaver.

To use Photoshop's photo gallery feature, select "File | Automate | Web Photo Gallery". Select the source folder for your pictures -- the folder where you placed all your full sized images. Select a destination folder for the photo gallery. You should create a new empty folder for this purpose beforehand. If you wish, you can also customize other things -- for example, the size of the thumbnails can be changed in the Options section. When you are ready, click "OK" and Photoshop will create the entire photo gallery page, complete with thumbnails and copies of your original photos.

How Do I Link From A Thumbnail To A Larger Photograph?
With this tutorial, you have learned the basics of how to create a photo gallery or photo album for your website, where your web page has thumbnails of pictures which when clicked will cause a larger version of the photo to be displayed.