Adding Images to Fast Gallery

Return to the Fast Gallery Documentation Index

IMPORTANT: First and foremost, your images must be non-progressive JPGs. If you are using Photoshop as your image editor, then during export of your images to the JPG format, you must ensure that the "progressive" checkbox is un-checked, as shown below.

Adding images to Fast Gallery is a two-step process. First, create the image and thumbnail, name them appropriately, and save them to the "images" folder within Fast Gallery. Then, update the XML configuration file with the path information, and image caption.

Step 1: Creating the Image and Thumbnail

In the gallery sample that was provided on download of Fast Gallery, all thumbnails had the format: name-thumb.jpg, where name.jpg was the primary image name. Further, all images and thumbnails were placed in the "images" sub-folder. This does not have to be the case, however. You can name the thumbnails and primary images nearly anything that you wish, as long as you take note of the names, so that you can get the path references correct when editing the XML file.

Thus, we could create an image called "birthday.jpg", and a thumbnail called "thumb-birthday.jpg", for example, instead of using "birthday-thumb.jpg". It's generally a good idea to stick to some consistent naming convention, but the convention that you choose is up to you. Just be sure that the image paths that you use are consistent with those that you use with the XML configuration file.

You can use any good image editing software, like Macromedia Fireworks or Adobe Photoshop, to create your images. Just keep in mind that they have to be JPG format, and they have to be non-progressive. I also recommend that you use lower-case for all file names. On Unix and Linux servers, "Image.jpg" is NOT the same as "IMAGE.JPG", which is NOT the same as "image.JPG" etc.

Step 2: Adding the path references in the XML configuration files

Now that you have some images and thumbnails, open your gallery XML file in a good text editor like Textpad. The lines of the XML file which control the image list, order of the images, and caption text, looks something like this:

<image thumb="images/image2-thumb.jpg">images/image2.jpg</image>
<captiontext>image 1 sample text</captiontext>
<imageurl popupwidth="460" popupheight="425">images/image2.jpg</imageurl>

Let's break this down. The first of these 3 lines should have the image path, relative to the gallery root. Thus, if you have the images in the "images" folder, then the paths will have "'images/" before the file name, as shown above.

The next line has the caption text, which appears at the top of the gallery image, on the same line as the print icon and zoom controls. The final line controls the popup image, if popuplink="1" in the configuration file. If popuplink="0" then this third line (<imageurl...>) has no effect. As the properties suggest, you can control the Javascript popup width and height using popupwidth=.. and popupheight=.. Be sure to include all of these parameters, even if popuplink is set to "0". The idea is that you can have different images for the thumbnail, main image, and popup image.

There is no limit on the number of images that can be added. These three XML lines translate to a single image reference. Thus, to re-order images, or remove images, you should move or remove all three of these lines at a time.