Advanced Activities

Add a Photo Gallery

How to Use Your Photo Gallery Page

Use the Photo Gallery Page to display photos from your sponsored events, company picnics or awards events. Put your web site address on your signs at the event, and pass out business cards with your web site address at the event to let people know they might see themselves on your Gallery page.

To view the pictures, click on the small images (called thumbnails) like the ones shown to the right. When you click on the thumbnail image, a larger version of the picture will display in a new window, like the bottom image at the right.

To make a photo gallery, you will need two pictures for every picture you want to show.

A big one like this:

(The original picture that comes off a digital camera is much larger than this, so you'll need to reduce it down to about 400X300 pixels, like this image.

And a thumbnail (small one) like this one:

(The thumbnail image should be no larger than 160 pixels wide.)

Making your gallery page is simple once you know how to do all the steps, but you may want to find someone to help with preparing the images. See Preparing Images for the Web and related Help pages for some tips on using PhotoPaint to resize your images.

Step 1. Take the pictures
Use the best camera you can afford, either a digital or a film camera.

Step 2. Create digital files of your pictures
Digital Camera - download the pictures using the instructions that came with your camera.
Film Camera - have prints made and then scan them. Or for an extra fee, most film developers will give you a digital version of your pictures on a CD ROM.

Step 3. Reduce the size of the files.
A small file size reduces the time your viewers have to wait to see your pictures. There are basically two ways to reduce the file size.

• Make the picture smaller. - Many digital cameras make a 1800x1200 pixel image or even larger. Most monitors display no more than 800x600 pixels, so the image is way too big to fit, and would take the rest of the week to download. A better size would be about 400x300. Use a graphics program (PhotoPaint, Photoshop, Fireworks, etc.) to reduce the actual dimensions of the photo. See Resizing Images In PhotoPaint for help.
• Reduce the quality - The jpeg compression scheme throws away some of the information in the image to reduce the file size. If you throw away too much, the picture starts to look vague and watery. Compressing to about 60% usually works pretty well. (In PhotoPaint, use Compression 20%, Smoothing 20%.) Be sure to keep a separate copy of your originals since every time you re-save a jpg image, you reduce the quality further. See Make Your Web Pages Display Faster for more information on image compression.

Step 4. Make Thumbnails
A thumbnail picture is a small version of your photo. Make them no larger than 160 pixels wide, like the photo at the left. There are good programs available for quickly and easily making thumbnails suitable for web pages, such as Thumbs Plus, but you can just make them in PhotoPaint or other graphics program. Be sure to give the small versions new names.

Step 5. Upload the Photos using your red "upload images" button.
Scroll to the bottom of the images page, click on the "Browse" button and find the directory where you put your photos and thumbnails. Upload each one. When you are done, print out the page of image file names, or write down the file names. You will need them for Step 7.

This step is explained more fully in Upload Images to Your Site.

Step 6. Add a "Photo Gallery" page to your website.
Click on your red "Add a Page" button, find the "Gallery" type and click on the green "Add" button next to it to add it.

On the Edit Page, the category should remain set at "Work in Progress" until you are satisfied with your results. Change it later to "Events" or other category when you want the world to view it. Change the Title and Link text if desired. See Edit Page Help for more information.

Step 7. Add the pictures to your Photo Gallery page.

Click on "Add a New Row of Photos." You will get a page that has boxes like the ones at the right.

Enter a number to specify how you want the rows of pictures to be ordered on your page. Use 01, 02, 03, etc. because the program recognizes these numbers as characters instead of numbers, and puts them in alphabetical, rather than numeric order. It is okay to skip numbers; in fact, we recommend it in case you want to reorder the rows later.

Next you will add information about the pictures you want to add. For each photo, type in:

• The name of the full-size picture, including the .jpg extension
• The name of the thumbnail image, including the .jpg extension
• The caption for the photo

Be sure to keep the captions short. If you just type as many letters as will fit into the box, it should look good on the page, like the caption circled below:

You will see three sets of three boxes for entering information- one set of three for the left photo, one set of three for the center photo and one set of three for the right photo.

Give your row a name. The name is used on other pages as a link to this particular row of pictures.
The name should be:

1. without spaces.
2. descriptive, so you know what is in the row
3. unique (otherwise the program won't know which row you mean and will always go to the first one with that name)

Here are some examples of row names:

PlazaMayRow1
BobsGrillMardiGras2a
BobsGrillMardiGras2b
EmpPicnicDivingBoard

Remember the name so that you can make the link to the row from your Retail Events page.

When you are done with entering the information for the pictures in a row, click on "Publish" and admire your work.

To add more photos, repeat from Step 7.