Using the ImageKit.Web Thumbnail Control

Thumbnail Images

Displaying a large number of images in a web application presents a number of challenges. The Thumbnail Control allows you to easily display numberous images as thumbnail images.

Using the ImageKit.Web Thumbnail Control

Below is an explanation of how to use the Thumbnail Control in a Microsoft ASP.NET web application

By running the ImageKit.NET3 installation program, the Thumbnail Control is automatically added to the toolbox. Below is an explanation of how to add the Thumbnail Control to the toolbox manually:

1. Place the mouse cursor over the toolbox and right click. Select "Add Tab"
2. Place the mouse cursor over the new tab and right click. Select "Choose Items".)
3. In the displayed dialog, click the "Browse" button and navigate to the directory where the ImageKit.NET3 is installed. Select the "Newtone.ImageKit.Web.Thumbnail.dll".
4. Click Ok

The WebForm Thumbnail Control has now be registered in the toolbox.

Virtual Directory

The directory containing the image files and the directory where the thumbnail image files will be created are both virtual directories. For more information please refer to the Newtone.ImageKit.Web.Thumbnail Class.

Creating a project

Below is an explanation for creating a simple project that uses the ImageKit.Web.Thumbnail Control

1. Create a new ASP.NET web application project in Visual Studio
2. From the toolbox, place the Thumbnail Control on the WebForm.
3. Set the Thumbnail Controls size and location. Also set the ColumnNumber, RowNumber, ImageWidth, ImageHeight, CellSpacing and other properties.
4. In the Page_Load event, copy the following code:
   

   [Visual Basic]
   
   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   
     If IsPostBack = False Then
       'Set the virtual path to the directory containing the images...
       Thumbnail1.ImageDirectory = "/SampleImages/1"
       Thumbnail1.ThumbnailImageDirectory = "/SampleImages/1/ThumbnailImages"
       Thumbnail1.ShowThumbnailImages()
     End If
   End Sub
   

   [C#]
   
   private void Page_Load(object sender, System.EventArgs e)
   
   {
   
     Thumbnail1.ImageDirectory="/SampleImages/1";
     Thumbnail1.ThumbnailImageDirectory="/SampleImages/1/ThumbnailImages";
     Thumbnail1.ShowThumbnailImages();
   }
   

5. Confirm that the virtual path to the SampleImages directory is correct and run the application. The Thumbnail Control will automatically create the thumbnail images and display them in a table in the client browser.

In the above, the directory containing the images is "/SampleImages" and the thumbnail image directory (where created thumbnail images are saved) is the "/SampleImages/1/ThumbnailImages" directory. Be sure that these directories exist and the IIS settings for them are correct.

Server Resources

Like all server components, when using the Thumbnail Control, conserving server resources is always a consideration. The following items can be recommended when server resources are scarce:

1. As much as possible, do not call the DeleteThumbnailDirectory method. If the thumbnail directory does not exist then all thumbnail images must be created. Needless calls to the DeleteThumbnailDirectory method forces the server to recreate thumbnail images when this is not needed.
2. Keep the size of the thumbnail images as small as is practical.
3. Keep changes to the thumbnail file to a minimum.

Using the Thumbnail Control with the ImageKit Control

When using the Thumbnail Control on one WebForm and the ImageKit Control on another WebForm, set the Thumbnail Control's EnablePaging property to False.

Below is an example where the Thumbnail Control is on WebForm1 and the selected thumbnail's corresponding image is displayed in the ImageKit Control on WebForm2.

[Visual Basic.NET]
Private Sub Thumbnail1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Thumbnail1.Click
    Server.Transfer("WebForm2.aspx?str=" + Thumbnail1.ImageDirectory + "/" + Thumbnail1.FileName)

End Sub

[Visual C#.NET]
private void Thumbnail1_Click(object sender, System.EventArgs e)
{
    Response.Redirect("WebForm2.aspx?str=" + Thumbnail1.ImageDirectory + "/" + Thumbnail1.FileName, false);

}

Also See

Thumbnail Members | Newtone.ImageKit.Web.Thumbnail