Displaying Random Images in an ASP.NET Web Page
By Scott Mitchell
Introduction
As web developers, we most often focus on backend web developer, buring our noses in defining and implementing the business logic, building CRUDs, and designing reports. Rarely are we concerned about maintaining the appearance and style of the website. For developers working in medium- to large-sized companies, this poses no problem as there are graphic designers whose job it is to design a slick layout and periodically update it in order to keep the site from becoming stale. In smaller companies, however, oftentimes the web developer writing the backend code is also the one responsible for maintaining the frontend.
One easy and cost-effective way of keeping a site from becoming stale is to display different images on a page each time it is visited. Many corporate websites use this technique on their homepages. For example, the homepage might have a picture of a facility or employees in the upper right hand corner. Rather than showing a single, static picture, each time the homepage is visited a randomly selected image is displayed.
There are a couple of ways to display random images, and this article will look at two different approaches. The first technique covered in this article is to simply display a randomly selected image file from a directory of files. This simplistic approach is easy to implement but is limited in a number of ways. We'll also look at a more professional approach that utilizes a free, open-source ContentRotator control I created back in September 2005. With the my ContentRotator control where you can specify what images, exactly, are candidates for being displayed as well as how likely a particular image should be selected relative to the other images in the image set. Read on to learn more!
Randomly Displaying an Image from a Directory of Images
The easiest way to display a random image is to add an ASP.NET Image control to your page (or Master Page) and to write a little code that gets all of the image files from a particular directory, uses the
Random
class to randomly pick an image from the list, and assings the randomly selected image's path to the ASP.NET Image control's
ImageUrl property. This can all be done in under 10 lines of code.
To illustrate the techniques we will discuss in this article, I created a simple ASP.NET 2.0 demo application that you can
download from the end of this article. This demo includes a Master Page named ImagesFromDirectory.master that
defines an 800 pixel wide page layout. In the top 250 pixels of the page you'll find an ASP.NET Image control named HeaderImage
that displays a randomly selected image. The ~/Images/HeaderImages/ folder contains five images that are sized to
precisely 800x250 pixels. The PickImageFromDirectory(directoryPath) method, shown below, returns the path
to a randomly selected image. This method is called from the Master Page's Page_Load event handler, where its
return value is assigned to the Image control's ImageUrl property.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
|
The code starts by using the DirectoryInfo class
to get a list of all of the files in the specified directoryPath. (In this case, ~/Images/HeaderImages).
To get all of the files from the directory, the GetFiles()
method is used. (Calling GetFiles() without any input parameters returns all of the files in the
specified directory, but you can return just a subset of the files by specifying a wildcard parameter, like
dirInfo.GetFiles("*.jpg").)
The GetFiles() method returns an array of FileInfo objects. To pick a random one, we simply need
to choose a random index into this array. This is accomplished by creating a Random class instance
and calling its Next(upperBound) method to get a random number less than upperBound. We can then
determine the name of the selected file and concatenate it to the end of the supplied directoryPath.
The following two screenshots shows this code in action. The first time I visit this page the 1,000 Island Lake picture was randomly selected.
I then refreshed the page. This time, the Half Dome picture was the one that was randomly selected.
Displaying Random Images Using the ContentRotator Web Control
While randomly displaying an image from a directory is straightforward and easy to implement, it's simplicity limits its overall functionality. In particular, each image in the specified directory is equally likely to be selected randomly. Additionally, the code considers all of the images in the specified directory when choosing one. However, you may only want a subset of the images in a directory to be considered when choosing an image to display.
Back in September 2005 I wrote an article on Microsoft's MSDN site titled Building a ContentRotator ASP.NET Server Control, which showcased a free, open-source content rotator control I created. Using the ContentRotator control is easy: just specify what content items are to be considered when choosing the content item to display. The content items can be specified through an XML file, added programmatically to the control, or hard-coded through the control's declarative syntax. Each content item can optionally include a weighting that indicates how likely each content item is to be selected relative to the other possible content items.
If your image information is in a database, you can programmatically add the set of images to consider for display to the
ContentRotator control's Items collection. Since there is no database in my demo application, I decided to
put the content items in an XML file:
<?xml version="1.0" encoding="utf-8" ?>
|
First off, take note of the XML structure: the root element is named <contents> and each of its
children elements are named <content>. Each <content> can include an
impressions attribute, which indicates the "weight" of the content item. If no impressions value
is specified (as in the case of the second <content> element) then a value of 1 is used.
The markup that appears within the <content> tags is the actual content that will be rendered for the
selected content item. Since this is an XML file, all text within the <content> must be escaped.
That's why the < and > characters for the img element have been escaped to
< and >, respectively.
The algorithm used to determine what content item to display uses each content item's impressions attribute. The Building a ContentRotator ASP.NET Server Control article describes this algorithm thusly:
"The algorithm used to randomly choose a content item works by laying out each applicable content item end-to-end, forming a line. The length of each content item is its impressions value, meaning that the total length of the line is the sum of the applicable content items' impressions. Next, a random number less than the total length is chosen, and the content item to display is the one that lies at the location of the random number. [The following figure] illustrates this algorithm graphically."Since the 1,000 Island Lakes picture has an impressions value that's equal to the sum of all of the other impression values, it will appear twice as often as any other picture.
To complete the implementation of this approach, all we need to do is add the ContentRotator control to the ASP.NET
page or Master Page where we want the random image to appear and set its ContentFile property to the path of the
XML content file. In the demo application available for download at the end
of this article I created an additional Master Page (ImagesFromContentRotator.master) that used the same
layout as ImagesFromDirectory.master. Instead of using an ASP.NET Image control, I instead added a ContentRotator
control to the header section. Using the ContentRotator control in your application involves the following steps:
- Add the
skmContentRotator.dllassembly to your application's/Bindirectory. - At the top of the ASP.NET page or Master Page where you want to use the ContentRotator control, add the following
@Registerdirective:<%@ Register TagPrefix="skm" Namespace="skmContentRotator" Assembly="skmContentRotator" %>. - Add the ContentRotator control to a page by adding the following markup:
<skm:ContentRotator id="ContentRotator1" runat="server" />.
The output of the ImagesFromContentRotator.master is identical to ImagesFromDirectory.master
except that the likelihood of the images displayed is non-uniform for the ContentRotator example.
Making the Image Path Absolute
One issue with the above content item markup is that the
img elements' src attributes are
relative. That is, they do not start with a / so the path to the image is relative to the path that the
current ASP.NET page exists within. For example, in the XML content file the 1,000 Island Lakes image path is set to
"Images/HeaderImages/1000IslandLake.jpg". If the ASP.NET page that uses this Master Page is in the application's
root directory, then everything will work fine. But what if later we create a subfolder named, say, /sales,
and we add an ASP.NET page in that folder that uses the ImagesFromContentRotator.master Master Page?
If the 1,000 Island Lakes photo comes up, it will look for the file /sales/Images/HeaderImages/1000IslandLake.jpg,
which doesn't exist!
If we were using the ASP.NET Image server control we could use the ~ character in the ImageUrl
property like "~/Image/HeaderImages/1000Islandlake.jpg". At runtime, the ~ would be automatically resolved
to include the appropriate root directory. The ContentRotator control emits static output, but fires an event after it selects
the content item to display. We can create an event handler for this event and properly root the image. To accomplish this,
start by updating each image path in the src attributes to start with "~/". For example, change the
1,000 Island Lakes image path from "Images/HeaderImages/1000IslandLake.jpg" to "~/Images/HeaderImages/1000IslandLake.jpg".
The choice of ~ is so that the syntax mimics that of the ASP.NET Image control. You could use any character
here that was not already in use in the markup (such as $.)
Next, create an event handler for the ContentRotator's ContentCreated event in the Master Page's code-behind class.
In this event handler we simple replace all instances of ~ with the web application's path (available via
Request.ApplicationPath):
Protected Sub ContentRotator1_ContentCreated(ByVal sender As Object, ByVal e As skmContentRotator.ContentCreatedEventArgs) Handles ContentRotator1.ContentCreated
|
In addition to its ContentCreated event, the ContentRotator control can also display dynamic content using
User Controls. For a more thorough discussion of the ContentRotator control refer to the
Building a ContentRotator ASP.NET Server Control article.
Happy Programming!
Further Reading
Attachments
