On the Program Site Template Tuesday Training, a couple folks asked how to make an image gallery on their website. For this tip, we will be using the Gallery page on the Program Template demo site as an example. These instructions will work on the Advocate, Client and Program Site template on dynamic resource or flexible content pages with ActivEdit or FCKeditor.

You will also need an image editing program to resize your images. Digital cameras often come with tools to resize images and will generally work fine. Snipshot is a great online image editor and will be used for this example.

Before you start creating your gallery, it's a good idea to plan out how you want it to look and make sure you have all the images you need in a folder on your desktop before you start. Think about how many images your want to post on the gallery and how many rows and columns you want to display. Start simple with the instructions below and when you are comfortable creating a simple grid, you can experiment with the more advanced placement options in the WYSIWYG editor.

I. Before you start editing your page, you'll need to make two versions of each image; the original larger version and a thumbnail sized preview. Do not try to resize the images in ActivEdit or FCKeditor.

a) Open each image in an editing program.

b) Edit the image size and reduce the width to 100 pixels. If you are using Snipshot, click the Adjust icon to enter the exact dimensions. The height will be adjusted automatically to keep the dimensions proportionate. You can use a larger width if you would like larger thumbnails, but it's important to use the same width for each image.

c) Save each image to your computer using the same file name as the original, BUT append a word at the end to indicate that it is a smaller version.
- In this example, the original file names are 1.jpg, 2.jpg, etc.
- The thumbnail versions are 1_small.jpg, 2_small.jpg, etc.

II. Upload the images to your website page.

a) Use the image icon in FCKeditor or ActivEdit to upload the original large version of each image. Do not place them in the editor's content area. We're just storing them on the server for now.

b) Upload each thumbnail sized image to your page. In our example, we are making a simple gallery with three columns and two rows.

c) Place each thumbnail image next to each other from left to right. It's not necessary to put spaces between the images. To start a new row, press Enter and place the remaining thumbnails images. Remember to give them a description or alt text in the appropriate field.

d) Save your progress to see how it looks. In our example, we now have a 3 x 2 grid of thumbnails.


III. Link each image to the larger version.

a) Since we already uploaded the larger versions of the images, we can get their website addresses and paste them as links for each image. If you have used consistent file names in Step I, you can do this very quickly.

b) Right-click on one of your thumbnail images and click Properties. One of the fields will have the URL for your image. In this example, the URL for our first thumbnail image is http://www.lawhelp.org/Program/3815/images/1_small.jpg.

c) Copy this whole address to your clipboard. Pasting it into a text file for quick access also can also be helpful.

d) Open the FCKeditor or ActivEdit for your gallery page.

e) Select your first thumbnail image and click the Links icon.

d) Paste the image address into the address field. Before saving, remove the _small from the end of the file name. In this example, the link address would be http://www.lawhelp.org/Program/3815/images/1.jpg. Remember to leave the .jpg extension.

f) Save the link and repeat for each thumbnail image, making sure to change the image name to the appropriate original version. This is where the consistent file naming really pays off!

g) Save your page and test each link. If they all open the correct image, you're done!

After you are satisfied with your new gallery, you can go back and make tweaks. For example, you can edit the links to the larger images to open in a new window. In ActivEdit, you just put a word (such as "_new") in the Target field of the Links tool. In FCKeditor, you can select from a number of options in the Target tab. If you want more spacing or a border between the thumbnails, select the thumbnail image and click the image icon to tweak the advanced image properties.

We hope this is helpful. Thanks again to the folks on the recent Program Site template training for the idea.