Designing and developing an Image gallery with thumbnails in ASP.net - Part 1

I have seen frequently, people asking about image gallery implementation.In most cases they are confused in handling the thumbnails.They are not sure whether they need to store a separate small image for thumbnail or use the original one in MBs.Even if they decide to use single image for thumbnail as well as original display they do the resizing at the client side which didn't reduce bandwidth usage.ie the image of size 1 or 2MB is downloaded to the client to show thumbnail of size 100x100.

Solution.

Here comes the importance of .net image libraries and the ability to directly write bitmap images into output stream as if the request is an ordinary image.

My last post describes how we can directly write images into asp.net stream.We can use the same technique here with some changes.In the earlier post the image was just writing directly into the stream.Here we will be getting the thumbnail of that image which is being returned.This uses the method GetThumbnailImage available in the Image class.

Architecture

The ImageGallery contains 3 modules.

1. Uploading:This uploads the given image file into server and saves in the server folder named ImageStore.The metadata such as Name,Description etc are stored in an xml file called Files.xml
2. Thumbnails display: Thumbnails are displayed in a DataList control.The thumb image url will be like '../Thumb.aspx?name=' to achieve the desired goal.
3. Selected image display : On clicking thumbnail, it will display the corresponding image in full size with all details.

Thumbnails display

The first and third modules are very easy.There is nothing special to do.But the thumbnail display needs special attention.As we discussed earlier we have to reduce the bandwidth.For that we are resizing the image using C# code.So we can't directly access the image like '../ImageStore/test.jpg'.The Thumbnail.aspx does this using the technique mentioned above.It doesn't have any aspx tags except page directive.It just writes the image requested through query string to output stream after reducing it's size.

public partial class Thumbnail : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           if (Request.QueryString["name"] != null)
           {
               string name = Request.QueryString["name"];
               Bitmap bitmap = new Bitmap(Server.MapPath("ImageStore/"+name));
               System.Drawing.Image image=  bitmap.GetThumbnailImage(100,100,new System.Drawing.Image.GetThumbnailImageAbort(thumb) ,IntPtr.Zero);
               image.Save(Response.OutputStream,ImageFormat.Jpeg);
           }           
       }
       bool thumb()
       {
           return true;
       }
   }

Now in the thumbnail list, check the size of each thumbnail.It will be some KBs...

Sample can be downloaded from here which is done using VS2008 and .Net2.0

This works fine for an experimental purpose.But won't in a production environment.Every one can access the Files.xml using it's URL(can be fixed using Database).Anybody can use the images hosted here, in their sites using the image URL.They can download images and upload into their sites without any overhead because these images doesn't have any protection methods such as watermark or signs.

The second part will be dealing with these concerns.