Displaying Random Images in an ASP.NET Web Page

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!

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
   If Not Page.IsPostBack Then
      'Programmatically pick a random image from the ~/Images directory
      HeaderImage.ImageUrl = PickImageFromDirectory("~/Images/HeaderImages")
   End If
End Sub


'Returns the virtual path to a randomly-selected image in the specified directory
Private Function PickImageFromDirectory(ByVal directoryPath As String) As String
   Dim dirInfo As New DirectoryInfo(Server.MapPath(directoryPath))
   Dim fileList() As FileInfo = dirInfo.GetFiles()
   Dim numberOfFiles As Integer = fileList.Length

   'Pick a random image from the list
   Dim rnd As New Random
   Dim randomFileIndex As Integer = rnd.Next(numberOfFiles)

   Dim imageFileName As String = fileList(randomFileIndex).Name
   Dim fullImageFileName As String = Path.Combine(directoryPath, imageFileName)

   Return fullImageFileName
End Function