Creating Thumbnail Images and DataBinding to a Repeater Control in ASP.NET

  • Article

I know there are controls out there that accomplish this same task, but I couldn't help but roll my own just to say "I did it."  This example shows how to dynamically create thumbnail images using the System.Drawing namespace in .NET, and how to use those thumbnails in a repeater control.

The default.aspx Page

The first step is setting up the page that will display the images.  I am using a DataList control for the binding.  Notice that the ImageUrl property of the asp:Image control is forming a concatenated string that looks like "MakeThumbNail.aspx?file=mypic.jpg". 

<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="xmlandasp._default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>default</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="https://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 112px; POSITION: absolute; TOP: 88px"
runat="server" RepeatDirection="Horizontal" RepeatColumns="5">
<ItemTemplate >
<asp:HyperLink Runat='server'

             ImageUrl='<%# string.Concat("MakeThumbNail.aspx?file=",DataBinder.Eval(Container.DataItem,"Name")) %>'

             NavigateUrl='<%# DataBinder.Eval(Container.DataItem,"Name") %>' ID="Hyperlink1" NAME="Hyperlink1"></asp:HyperLink>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</HTML>

 

The default.aspx.cs Code-Behind

The DirectoryInfo.GetFiles method returns an array of FileInfo objects, and this araray is used as the DataSource to bind to the DataList control.  Any object in .NET that supports the IEnumerable interface can be used as a binding datasource. Because the FileInfo array is actually a System.Array class that contains FileInfo objects, and the System.Array class supports IEnumerable.  This makes the binding possible to an array of FileInfo objects. 

 

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace xmlandasp
{
/// <summary>
/// Summary description for _default.
/// </summary>
public class _default : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataList DataList1;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
System.IO.DirectoryInfo dir = new System.IO.DirectoryInfo(Server.MapPath("."));
DataList1.DataSource = dir.GetFiles("*.jpg");
DataList1.DataBind();
}

#region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
  }
}

 

The MakeThumbNail.aspx Page

Recall that we used "MakeThumbNail.aspx" to form the ImageUrl for the asp:Image control in our DataList.  This page is not going to display HTML, so we rip out the static HTML from the page, leaving the Page directive.

 

<%@ Page language="c#" Codebehind="MakeThumbnail.aspx.cs" AutoEventWireup="false" Inherits="xmlandasp.MakeThumbnail" %>

 

The MakeThumbNail.aspx.cs Code-Behind

 

All that is left is to create the thumbnails. 

 

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace xmlandasp
{
/// <summary>
/// Summary description for MakeThumbnail.
/// </summary>
public class MakeThumbnail : System.Web.UI.Page
{

  /// <summary>
/// Renders the thumbnail the response stream
/// </summary>
private void Page_Load(object sender, System.EventArgs e)
{
System.Drawing.Image.GetThumbnailImageAbort myCallback =
new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);

System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(Request.QueryString["file"]));

System.Drawing.Image thumbNail = image.GetThumbnailImage(100, 80, myCallback, IntPtr.Zero);
Response.ContentType = "image/jpeg";
thumbNail.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
image.Dispose();
thumbNail.Dispose();
}

/// <summary>
/// Required, but not used
/// </summary>
/// <returns>true</returns>
public bool ThumbnailCallback()
{
return false;
}

#region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
  }
}

 

And that's it.  You can see a working example on my web site.