Displaying a List of Scaled Images
By Scott Mitchell
Introduction
A question I saw recently on one of the ASPAdvice.com ListServs had to do with enumerating through the list of files in a directory. I helped answer this poster's question, and decided that perhaps 4Guys readers would be interested in this information. So I decided to write up an article on how to display the images residing in a directory using this approach. In creating an ASP.NET Web page that accomplished this, I soon found that if the images in the directory had wildly varying image sizes, the format of the page was quite haphazard.
To fix this problem, I needed to be able to determine the image's width and height and then, if
these image properties were greater than some specified maximum, the image needed to be scaled
accordingly. In this article we will examine two things: first, how to list the images in a directory
(which can be generalized to how to list enumerate through any files in a directory); second, we'll see
how to use the .NET Framework's Image
class to determine an image's height and width.
Enumerating Through the Files of a Directory
The .NET Framework provides a number of classes to work with the Web server's file system, the most useful two being the
Directory
and File
classes, which both contain a
number of static methods that perform a variety of tasks. For example, to create a new text file
you can use the File.CreateText()
method. (For more information on working with text
files in an ASP.NET Web page be sure to read: Reading Text Files in
an ASP.NET Web Page.)
In order to enumerate through the files in a directory, use the Directory.GetFiles()
method. This method returns a string array, with paths to the files in the directory. The method
can be used in one of two ways:
filesInDirectory = Directory.GetFiles(directoryPath)
|
Which returns the paths to the files in the directory directoryPath as a string array. If you want to only get particular files from the directory, you can specify an option second input parameter like so:
filesInDirectory = Directory.GetFiles(directoryPath, searchPattern)
|
The searchPattern can have values using the wildcard symbol *
, like
*.txt
, SomeFile*.doc
, etc.
For example, if you only want to get .txt
files from the directory C:\SomeDir
you could use the following code:
Dim textFiles as String() = Directory.GetFiles("C:\SomeDir", "*.txt")
|
Imagine that we have a directory that has a number of image files in it, and we want to display all the GIF files in a Web page. To enumerate through all of the GIF files we can use the following code:
|
But what should go inside of the For Each ... Next
loop? In each iteration of the loop,
s
contains the physical path to the file. We'll want to display the image using
an img
tag, however, which expects as its src
property the virtual path
to the file. That is, if the images are stored in the directory C:\Images
, which is
accessible via our Web site at http://www.pictures.com/images/
, the physical
path for an image is C:\Images\imgFileName
, whereas the virtual path is
/images/imgFileName
.
In order to properly render an img
tag, we can use the following code in the For Each ... Next
loop:
|
where IMAGE_DIRECTORY
is the virtual path to the directory where the images are stored
(i.e., /images/
). (Note that Server.MapPath(virtual path)
returns
the physical path corresponding to the passed-in virtual path. See
Using Server.MapPath()
for more information.) The Path.GetFileName()
method retrieves the file name portion from
a file path. Keep in mind that s
has a value like C:\Images\file.gif
, and
all we want is the file.gif
portion for the img
's src
attribute
and the a
tag's href
attribute - hence, we use Path.GetFileName(s)
to snip out the file name portion.
Rather than displaying the contents of the variable html
using Response.Write()
or a Label Web control, let's use a DataList. In order to display the images in a DataList, we need to
place the html
value in a collection, such as an ArrayList. The following code will
add html
's contents to the ArrayList pics
, and then bind the ArrayList to
the DataList dlPictures
.
|
A couple quick things to note here. First, note that we must import the System.IO
namespace to use the Directory
and Path
classes.
Next, in order to display the value of each ArrayList item, we use the syntax <%# Container.DataItem %>
in our DataList's ItemTemplate.
Take a moment to check out the live demo. You'll note that some images are much bigger than others. Those that are, cause their table column to be wider than others, which leads to some ugly formatting, requiring horizontal scrolling. In order to deal with this, we need to dynamically resize our images, so that they are constrained to a specified height and width. We'll examine how to do this in Part 2.