How can I display an image in a repeater or grid control?

Question

I have around 200 images to be displayed on a page.

The database only stores the path where image is located. Images themselves are stored in the application's folder. EG: d:/application/website/images/

• I need to convert the original size image to a thumbnail image while displaying the thumbnail
• Is there any functionality to do this?
• Ideally, the display would have 5 rows and 5 columns, and then use paging to display the rest of the data.

Essentially, an image gallery: The app shows a thumbnail image on the grid/repeater page, and when the user clicks on that thumbnail a new pop up window opens displaying the entire image. Can I make this work with the repeater control?

Any idea how to display the thumbnail images in repeater control.

Are there any web sites which can help me out?

Answer 1

First off, I need to say that storing the thumbnails on the server would probably be much more efficient than this solution. Some of the principles in this code would be usable for creating these thumbnails as the images are uploaded. That would probably be a better way to go.

That being said, here is a possible solution. This was hacked together really quickly, but it does work. I use something similar to serve up attachments from a database. Create a new ashx page as follows:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        Bitmap b = new Bitmap(@"c:\temp\pictures\" + context.Request.QueryString["filename"]);

        Image i = b.GetThumbnailImage(48, 48, null, System.IntPtr.Zero);

        using (MemoryStream ms = new MemoryStream())
        {
            i.Save(ms, ImageFormat.Jpeg);
            context.Response.BinaryWrite(ms.ToArray());
        }

        context.Response.ContentType = "image/jpeg";
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

This will find a file who's name is passed in from the query string and create the thumbnail and use a memory stream to display the image. You will obviously have to adjust for path, error handling, ensuring mime types are correct, etc.

Once you have this complete, you can use this URL (something like http://localhost/Handler.ashx?filename=myFirstImage) in a repeater to generate your thumbnails.