Extending the ASP photo gallery demo
This demo can be seen and the files downloaded - here, and the description of it can be seen here.
Producing a gallery dynamically in this way makes a collection of images on a web site very easy to maintain. New images can simply be copied to the appropriate directory with no editing required. The disadvantage is that the pages can be slow to load, especially if there are large numbers of images on each page. Also, there is a large amount of processing required on the server. For maximum performance, static images should be used, but that means making resized copies of everything, and if any logos, watermarks or copyright information is required, that must be done before the images can be copied to the server. There is an intermediate solution based on our gallery example, described below.
Our example has a script called thumbnails.asp which resizes each image and streams it to the browser. This could have an extra command added to save the thumbnail image to disk on the server, in a folder that will just contain thumbnail images. The main page, showfiles.asp, will include some addition logic to check for the existance of a thumbnail image. If it exists it will link to this image inside the <img> tag. If the thumbnail does not already exist, it will link to the thumbnails.asp script. This script will display the image in the usual way, but it will also save it, so that it will exist when the next user needs to view it.
The thumbnails must be stored in a folder that is part of the web site, so the easiest place to put it is immediately below the scripts. Here are the changes that would be made to showfiles.asp.
'Loop through the files on this page
For I = StartFile To EndFile
'Write out the link to the full sized image and the IMG tag to the thumbnail
If ListObj.FileExists(Server.MapPath("thumbnails/" & ListObj.FileList(I))) Then
Response.Write "<a href=""fullsize.asp?Name=" & _
Server.URLEncode(ListObj.FileList(I)) &
"""><img src=""thumbnails/" & _
ListObj.FileList(I) & """></a><br>"
Else
Response.Write "<a href=""fullsize.asp?Name=" & _
Server.URLEncode(ListObj.FileList(I)) &
"""><img src=""thumbnails.asp?Name=" & _
Server.URLEncode(ListObj.FileList(I)) & """></a><br>"
End if
Next
That code looks complicated because of the HTML tags and the muliple quotes, but it is really just an IF..THEN..ELSE which checks if the thumbnail already exists and shows a choice of two image tags depending on the result.
The extra line added to thumbnails.asp is shown below and it must be added after any editing, so the very end of the script would be suitable, or it could be before streaming the file to the browser.
Image.WriteFile Server.MapPath("thumbnails/" & Request.QueryString("Name"))
Using IPTC data to store captions
The benefits of a dynamically produced gallery is usually so that photographs can be used straight from the camera, without editing them first. If they have been edited in some way and have had IPTC data added, this could be used as part of the display, for example by putting the caption below each image. The ReadMetaData method can be used in the showfiles.asp script to read the IPTC data, which is quicker than loading the complete image. This will give access to the IPTC properties supported by csImageFile. For example, the following code inside the FOR loop:
For I = StartFile To EndFile
ListObj.ReadMetaData Directory & "\" & ListObj.FileList(I)
Then later in the script, the IPTC caption can be used:
Response.Write ListObj.FFO_Caption