ASP.NET 2.0 Cookbook, 2nd Edition

15.4. Displaying Thumbnail Images

Problem

You want to display a page of images stored in your database and scaled on the fly to thumbnail format.

Solution

Implement the first of the two ASP.NET pages described in Recipe 15.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 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 write it to the Response object.

Examples 15-16 and 15-17 show the VB and C# code-behind class for our example that illustrates this solution. (See the CH15ImageFromDatabaseVB .aspx file and VB and C# code-behind files in Recipe 15.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 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 in the ...