A Picture Gallery using the Content Linking Component

Before we Begin

I have received a LOT of email on this article. Most of it from people saying thank you. A lot of it though is on compatability problems. I thought I would forward them to you. Two main issues have come up: - continued - 1.) I am "flushing" the contents for default.asp and admin.asp. For those using anything other than Win2000 Server, they should include a line on top of these files, right after the Option Explicit declaration, reading: <% Response.Buffer = True %> 2.) The show.asp page constantly flashes when viewing individual pictures with some Netscape browsers. To solve this, change line 16 from: If NumSeconds <> "None" Then to read: If NumSeconds > 0 Then This completely erases the refresh line from the page if the slideshow option is off. Happy Programming!

Introduction
Like some people I keep my own on-line photo gallery. It keeps growing and growing just like my appetite for new pictures of my life! I was putting those pictures on the Internet and I wanted a quick way to be able to handle adding, updating, and deleting them. I could of course use a database/template solution, but I wanted something easy and simple. The solution I devised was to use the Content Linking Component, which comes with IIS/PWS, as well as the FileSystemObject.

What exactly can you get with this code? Here were my goals:

1.) Create a pictures folder which would contain other subfolders, dividing my pictures into different categories - for example "school", "vacations" and "work". If I add or erase folders, the changes will be automatically recognized by the system.

2.) Drop or erase pictures from the folders. Changes will be recognized by the system automatically.

3.) Be able to add an optional "Title" and a "Description" to each picture.

4.) Be able to have a click-through of the pictures, with the option of a variable timer to proceed to the next picture - kind of like a slide show.

All the code has been tested on IIS 5.0 using ASP 3.0. It uses the FileSystemObject and the Content Linking Component, so you must make sure you have those two components installed (they are installed by default, so you shouldn't have a problem with the code). At the end of this article you can download the full source code files and even try out a live demo. All you need to do is put them in your web site and it will work for you too. Further on in this article I will explain what each file does. The snapshot to the right shows how they file structure should be laid out:

Now, let's look at each six ASP pages that make up this picture gallery application!

common.asp
This file contains the declarations of all the variables that we will need for this application. I use a server-side include to imports its contents into all of the other files. (For more information on server-side includes, be sure to read: The Low-Down on #includes!) Instead of declaring my variables at the beginning of every page, I put them all in this file. Not all variables are used for every page, so doing this increases unnecessarily the file size, but I sacrifice size for ease. This way I only have to maintain one file for my variables. If you don't like this, then get rid of this file and just add the variables you need in each page.

One thing you should do is open this file and find the lines where I added a message for you to change something. If you follow the structure that I suggest then you don't need to change anything here. I am just doing this to make it easier for you:

<% Dim myTextFile 'name to give to all Text Linking files Dim myFolder 'name of main folder where pictures are in Dim mySeparator 'special characters to separate the description '********change these ********** myTextFile = "ContLink.txt" myFolder = "pictures" mySeparator = "#####" '**************************** ... %>

Change the names you want to give to your text linking file and the folder where your pictures are in (Note: remember that you need to create subfolders within myFolder subfolder!). The Separator is used as a trick to disguise a Title and a Description in the "Description" of the Text Content Linking file. Let me explain. If you recall, a typical Content Linking file is a simple text file, with a separate line for each link. Each line is made of 3 parts: the "URL" of the file to get, its "Description" and optional comments. These 3 elements are separated by a TAB:

Instead of using an actual URL for the first property I am using the filename of the picture. I split the "Description" into 2 parts, separated by mySeparator, which in this case is #####, so that I can have a Title and a Description for the picture. Of course you can change this to whatever you like. Just make sure it is not something that could show up in your description. So, if we add the separators a typical file would be something like this:

A possible enhancement to this system is to also split the URL into the picture and its thumbnail, or maybe another separation in the "Description" telling us who took the picture, like so:

In Part 2 we'll look at the code for the other ASP pages in our Picture Gallery application!