This article was written in 2001. It has a good example of how Classic ASP can use an XML file as a data source. However, I wouldn't use it today to create a photo gallery. There are much better options out there. With that said, this code is no longer supported.

In the article Creating an ASP Photo Gallery, I showed you how to create a very basic photo gallery using just a few lines of ASP code. It was quick and dirty, however, it had limitations.

The first limitation was that all the photos had to be the same size. You could remove the width and height tags from the image, but that is clumsy coding and browsers always render non-sized images funky. The second problem was that we had to rename the images to a number and then maintain a sequence. If you have 5 images that isn't a problem, if you have 100 it becomes tedious. And the last thing missing was the ability to quickly add titles, descriptions, and alt tags for each image.

Choosing a Weapon

OK, we need to store and maintain data about the picture. We have 3 options. Option 1 - We build data arrays on the actual ASP page and populate it there. This is not a clean design. Ideally we want to keep the data and code separated in order to support code reuse. Option 2 - Create a database. Building a database in Access or MySQL is easy enough, but it's overkill for a single photo gallery. Do we really want to setup connection strings and deal with versioning and licensing issues for such a small dataset? No. Option 3 - XML. With XML we can keep the data apart from the code and we don't need a database.

The XML Image File

The XML image file will capture a sequence number, the file name, image width, image height, short caption, long description, and an image ALT tag.

<?xml version="1.0"?> 
<images> 
  <image num="1" file="me.jpg" width="400" height="302" short="Me" long="Me at  Graceland." alt="photo"/> 
</images>

What Can We Automate?

I don't know about you, but I'm not going to fire up an editor and hack out the XML image file. The code should generate most of the body of the file with the exception of the short, long, and alt descriptions. We can use the FileSystemObject to detect images. From this point, we can use the Microsoft.XMLDOM object to build the XML for the photo gallery. Once that is created, wouldn't it be nice to go through the gallery and assign those values in a form? As for the image width and height, we can use client-side javscript to calculate those values the first time that the gallery is viewed.

Security

Since we don't want other users modifying our image captions, we will assign a password to gallery. The password is passed in the querystring under the parameter k and will open the Admin FORM. Example: gallery.asp?k=password&pic=1. This will also give you the power to make text changes from any browser.

Other Admin Features

Besides saving image attributes, the Admin form will allow you the ability to remove an image. The image is removed from the XML file, not the server. And should you upload additional images or accidently remove an image you need, there is a Detect Images buton which will append an image file found in the image folder that doesn't appear on the XML image file.

Setting Up The Photo Gallery Page

My first goal was to make this code as easy as possible for a non-techie to use. The best way to pull that off is to hide all the gritty file detection and XML manipulation in a separate file. All coding logic is kept in an include file called galleryCode.asp. The 2nd file is the ASP file used to house the image gallery. At the top of this file we need to define the following:

key - This is password you'll use to access the gallery as an administrator. galleryURL - The URL to the photo gallery from the root (the virtual path). galleryASP - The name of the ASP page of the actual photo gallery. galleryImageURL - The URL (virtual path) to the photo gallery images. xmlName - The name of the XML file. xmlPath - This is the full file path of the XML file you will be using. This is the only tricky line. Some web hosts don't give read/write permission on directories accessible via the web server. This variable allows you to define a path to a folder that will permit writing and modifying files. Without such a folder this code won't work, so ask your web host for a read/write folder should this code fail.

<% 
' EXAMPLE PHOTO GALLERY SETUP 
key = "secret" 
' page password to access ADMIN 
galleryURL = "/pix/springbreak/" 
galleryASP = "default.asp" 
'this page 
galleryImageURL = "/pix/springbreak/images/" 
xmlName = "springbreak.xml" 
xmlPath = "c:\readwritefolder\" 
%>

Building the Photo Gallery

In addition to your choice of colors and layout, your photo gallery will make simple calls to functions in the galleryCode.asp file. These include:

backLink, nextLink - This will draw the HREF link to the previous and next image. The user can use a text or image link after the call. Be sure to close out the link with a </a>.

thisShort, thisLong - thisShort returns the assigned short title and thisLong returns the long description.

drawImage(border) - Make a call to this subroutine where you want the image placed. The parameter is the pixel width of the border.

drawSequence(perLine) - This returns a sequential list of all the images linked to a number. This allows the user to bypass using the Next and Previous navigation and jump directly to a particular image. The perLine parameter restricts the number of links per line.

drawAdmin - This call is where you want the Admin form to be placed on the page.

Overview

1 - Define filePaths and password on the top few lines of the gallery page.

2 - Upload gallery ASP page and gallerycode.asp file.

3 - Upload images to server. The directory should be unique to that photo gallery.

4 - View the page.

5 - If this the first time the page has been viewed, the images XML file will be created.

6 - Place the password in the querystring and then a FORM will display for each image.

7 - Update the title, description, and alt tag. Go the the next image; repeat this sequence until you've finished. NOTE: Verbiage is optional. However, you'll still want to go through each image so the image height and width are saved to the XML file.

Download

Download Photos2.zip (includes gallery.asp and galleryCode.asp) if you wish to run the ASP Photo Gallery.

Labels: ASP, Photos, VBscript, XML