ASP photo gallery demo - code listing

There are four scripts used in this demo. "showfiles.asp" is the starting page for the application and it acts as a placeholder for the images. "thumbnails.asp" creates the thumbnail images and streams them to the browser. "fullsize.asp" acts as a placeholder for the full sized image, which is streamed from "fullimage.asp"

To see this demo running or to download the files - click here.

showfiles.asp

This script contains the code for listing the images in the source folder and controls how many images are shown on each page and how many pages are required. It contains the links and form for navigating through the pages. It uses the csImageFile component to list the images, making use of the FileList collection. It does not perform any image processing. It would be possible to extend this application to read IPTC information from the images and that is one of the reasons for using csImageFile here instead of the File System Object. There is no reason why you could not use the File System Object to list the files if you prefer.

A variable is passed to this script as the user navigates the pages of the gallery. It can be passed in the URL, using the First, Previous, Next and Last links, and it can be passed as a form variable if the page is selected using the drop down option box. This variable is read using Request("Page") so it will be found regardless of whether it is a form or URL variable.

As much of the code as possible runs at the start of the script. First the source directory is specified as well as the number of images to be shown on each page. Then the page number is found.

'Directory is of the form "c:\images" or "c:\images\*.jpg" to filter on file type
Directory = "c:\images"

'The number of thumbnails on a page
PageSize = 5

'Read the page number, which could be a form variable or URL variable
Page = Request("Page")
If Page = "" Then
Page = 1
End If

'Ensure it is an integer and not a string
Page = CInt(Page)

If you have downloaded this demo to use on your own computer you must set the Directory variable to something appropriate. It must be a physical path, although you could use Server.MapPath to find a physical path. csImageFile can filter a directory listing but only using a single extension type.

The next part of the code uses the csImageFile component to list the files in the source directory. It finds the number of files in the directory and uses this to set the variables that will be used for navigating the pages. This code example uses the trial version of csImageFile.

'Create the object that reads the directory
Set ListObj = Server.CreateObject("csImageFileTrial.Manage")
ListObj.DirSortType = 2
ListObj.DirName = Directory

'Set the variables that will be used for navigating between pages
LastPage = Int(ListObj.FileList.Count / PageSize) + 1
If ListObj.FileList.Count < Page * PageSize Then
  Page = LastPage
End If
If Page > 1 Then
  PreviousPage = Page - 1
Else
  PreviousPage = 1
End If
If Page < LastPage Then
  NextPage = Page + 1
Else
  NextPage = LastPage
End If

csImageFile lists the files in the directory specified by the DirName property as the FileList collection. A collection has a Count sub property indicating the number of elements. The DirSort property controls the order in which the files are listed in this collection. The choices are alphabetical order or date order (date last modified), and they can be ascending or descending. This example lists the files in ascending date order.

The next working part of the script is inside the body of the page. It uses some of the variables set earlier to find the first and last image to appear on the current page and then displays each image in a For..Next loop.

'Find the files to show for this page
StartFile = (Page - 1) * PageSize
EndFile = StartFile + PageSize - 1
If EndFile > ListObj.FileList.Count - 1 Then
EndFile = ListObj.FileList.Count - 1
End If

'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
  Response.Write "<a href=""fullsize.asp?Name=" & _
   Server.URLEncode(ListObj.FileList(I)) & """><img src=""thumbnails.asp?Name=" & _
   Server.URLEncode(ListObj.FileList(I)) & """></a><br>"
Next

Each image is enclosed in a link which leads to the full size version of the image. We have just put a line break between images to avoid making this code too difficult to follow.

The last part of the script generates the navigation links and a drop down option box allowing a direct link to any page in the application. These are also kept simple to make them easier to follow.

<p><a href="showfiles.asp?Page=1">First Page</a></p>
<p><a href="showfiles.asp?Page=<%= PreviousPage %>">Previous Page</a></p>
<p><a href="showfiles.asp?Page=<%= NextPage %>">Next Page</a></p>
<p><a href="showfiles.asp?Page=<%= LastPage %>">Last Page</a></p>
<form action="showfiles.asp" method="post">
Page: <select name="Page" Size="1">
<%
'Write out the selection box and select the current page number
For I = 1 to LastPage
  Response.Write "<option "
  If I = Page Then
    Response.Write "selected "
  End If
  Response.Write "value=" & I & ">" & I & "</option>"
Next
%>
</select>
<input type="submit" value="Submit">
</form>

The <img> tag points to the script "thumbnails.asp" which sends the image to the browser, and is described below.

thumbnails.asp

The first part of this script sets some variables. You will need to set the Directory and Logo variables to match the source folder for the full sized images and an image for a logo to be placed on the images. Then the dimensions of the thumbnail are set. These are maximum dimensions and the image will be shrunk to fit inside this width and height while maintaining aspect ratio.

'These are the paths to the directory of images and the logo
'Directory is of the form "c:\images"
'Logo is of the form "c:\images\logo.gif"
Directory = "c:\images"
Logo = "c:\images\logo.gif"

'This is the maximum width and height of the thumbnail image.
Width = 200
Height = 200

The rest of the script creates an instance of the csImageFile component, loads the image using the file name passed in the URL, and resizes it. It sticks the logo image on top, and streams the image to the browser using Response.BinaryWrite. The part with the logo is optional and could be removed, or replaced with some other processing, such as adding a copyright notice or a watermark.

Set Image = Server.CreateObject("csImageFileTrial.Manage")
Image.ReadFile Directory & "\" & Request.QueryString("Name")

'ResizeFit always maintains the aspect ratio
Image.ResizeFit Width, Height

'This puts the logo onto the image at the spcified coordinates
'If no logo is used, remove the following line
Image.MergeBack Logo, 10, 10

Response.ContentType = "image/jpeg"
Response.BinaryWrite Image.JPGData

fullsize.asp

This is a web page which acts as a placeholder for the full sized image. The script in the page takes the filename from the URL variable and runs it through Server.URLEncode so that awkward characters are not lost and then it puts this into the <img> tag which calls the script "fullimage.asp"

<%
FileName = Server.URLEncode(Request.QueryString("Name"))
%>
<img src="fullimage.asp?Name=<%= FileName %>">

fullimage.asp

This script is similar to the thumbnail script but without the resize. It also positions the logo image onto the photograph but this could be removed, or a different image could be used from that used on the thumbnail.

Possible modifications to this demo

The next page describes some possible modifications that could be made to this demo. This includes a method of saving the thumbnail images so that they do not need to be resized dynamically every time a user loads the page.