**********************************************************************
         A Picture Gallery using the Content Linking Component
                       by: Evagoras Charalambous
**********************************************************************

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 (for more info on the
FileSystemObject, check out:

http://www.4guysfromrolla.com/webtech/faq/faqtoc.shtml#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). 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. 

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. 

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:

http://www.mydomain.com/webtech/images/Pg/3.gif

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: http://www.mydomain.com/webtech/images/Pg/4.gif

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:

http://www.mydomain.com/webtech/images/Pg/5.gif

default.asp
Our starting page, when visited through a browser, lists the various folders
of pictures (or each gallery), the total file size for each folder, the
number of pictures in the folder, a link to an Administration page, and an
option to view a slide show. A screenshot of default.asp can be seen below:
http://www.mydomain.com/webtech/images/Pg/1.gif

The code goes through the myFolder you specified in common.asp (pictures in
this case) and looks for folders. For every folder it finds it checks to see
if it contains a text Content Linking file with the name we specified in
myTextFile (i.e. ContLink.txt). If there is none, it loops through all the
contents of the folder, creates a string with the names of the files, and
then uses the FileSystemObject to write it in its folder. At this moment the
"Description" is just the name of the file without the extension. After
that, or if the text file is already there, it creates the table as shown
above. Using the pulldown menu for each folder you can choose a time to
automatically loop through that folder. You may choose to remove the link to
the administration page from this page if others will have access here.

list.asp
By clicking on the folder name school in the default.asp page you get the
screen below: http://www.mydomain.com/webtech/images/Pg/6.gif

This page simply lists all the "Titles" of the pictures in the specific
folder, which is harvested from the "Description" of the picture in its text
file. From here you can click on a specific picture to view it.

show.asp
This file displays the pictures. Format the page to how you see fit. I added
some code on top to show you where you are in relation to the total pictures
in the folder, and links to the Next/Previous pictures.
http://www.mydomain.com/webtech/images/Pg/7.gif
http://www.mydomain.com/webtech/images/Pg/8.gif

Since we may have a slew of pictures in a given folder (gallery), we must
know what picture we are currently viewing out of the list of total
pictures. This position is specified and maintained by a variable named
Index that we pass through the QueryString.

If we get to this page by selecting the "slide show" from the default.asp
page then it will refresh after the number of seconds we specified, fetching
the next picture in our gallery. After the last picture it goes back to our
list of pictures for that folder.

admin.asp + do_admin.asp
The administration page allows us to delete and edit pictures. We can easily
add a Title and Description to our pictures. The pictures are the same ones
as the larger ones, just at a smaller scale, so if you have a lot of them in
the folder it could take a while to load. I like to see them here because
sometimes I choose to erase some of them. To delete a picture from the
folder and from its Content Linking file, click on the corresponding
"Delete" checkbox next to the picture. Once you are done with your changes,
click the submit button. The changes are carried over to the do_admin.asp
page, which does all the processing. 

Last Thoughts
And now that you have your gallery ready and functioning, you can use it to
post your summer vacation pictures on your personal site, or for a much
bigger project. This method works relatively easy and is not very hard on
the server. There is one drawback though that's pretty obvious. If you want
to preserve your Titles and Descriptions when you are adding new pictures
you will have to edit the text file directly. One could possibly work on
that and add the functionality to this code. My code only checks for the
existence of a text linking file, and if one is already there it accepts it.
If you add/delete many pictures to your folders you might want to erase the
text file from that folder and reload the default.asp page to create a new
text file. You would then loose your Titles and Descriptions if you have
any. One could possibly work on this and add further functionality to my
code that would check the text linking files against the folder contents and
do the necessary updates.

If you have any suggestions for improving this code or questions on it, feel
free to contact me. I can be reached at my website at
http://www.evagoras.com/ or at my email evagoras@evagoras.com.

Happy Programming!


