ASP.NET Cookbook

12.4. Displaying Thumbnail Images

Problem

You want to be able to display a page of images stored in your database in thumbnail format.

Solution

Implement the first of the two ASP.NET pages described in Recipe 12.3, changing the Page_Load method in the code-behind class to scale the full-sized image retrieved from the database to the appropriate size for a thumbnail presentation.

In the Page_Load method of the code-behind class for the page, use the .NET language of your choice to:

1. Create a System.Drawing.Image object from the byte array retrieved from the database.

2. Use a constant to define the height of the thumbnail and then calculate the width to maintain the aspect ratio of the image.

3. Use the GetThumbnailImage method of the Image object to scale the image to the desired size.

4. Load the thumbnail image into a MemoryStream and then write it to the Response object.

Example 12-16 and Example 12-17 show the VB and C# code-behind class for our example that illustrates this solution. (See the CH12ImageFromDatabaseVB .aspx file and VB and C# code-behind files in Recipe 12.3 for our starting point.)

To display the thumbnails, create another ASP.NET page, add a DataList control with image tags in the ItemTemplate, and then use data binding to set the src attributes of the image tags.

In the .aspx file for the page:

1. Use a DataList control to provide the ability to generate a list using data binding.

2. Use a HeaderTemplate to label the table of images.

3. Use an ItemTemplate to define an image that is displayed ...