Click here to Skip to main content
Click here to Skip to main content
Go to top

ThumbnailSet ASP.NET User Control

, 6 Oct 2009
Rate this:
Please Sign up or sign in to vote.
Share images with ease by creating thumbnail pages with this ASP.NET User Control
Example of rendered ThumbnailSet

Introduction

Do you have a lot of images to share with your friends and family? Tired of sending them by email? If only sharing images on a web page did not involve the boredom of repeating all those <a> and <img> tags... wait, now it doesn't!

Here is a control that automatically creates a table with images for all files in a thumbnail directory while hyperlinking them to full-size images in a different directory.

Background

I came up with the idea while creating my Odessa Pictures page. With the help of this simple control, it took less than 30 seconds to create a web page with more than 120 images.

Using the Code

To use the control, first register it with this directive on the *.aspx page (assuming you placed downloaded source in ~/UserControls):

<%@ Register Src="~/UserControls/ThumbnailSet.ascx" 
	TagName="ThumbnailSet" TagPrefix="uc1" %>

Then use <uc1:ThumbnailSet> tag on the *.aspx page. Here is an example:

<uc1:ThumbnailSet ID="ThumbnailSet1" runat="server"
    StartTitle="My Images"
    EndTitle="(shared via ThumbnailSet)"
    ThumbSrc="~/Images1/thumb" ThumbFilePattern="*.jpg"
    ImgSrc="~/Images1" ImgFilePattern="*.jpg"
    ColumnsPerRow="4"
/>

This particular code will display thumbnail images from ~/Images1/thumb directory hyperlinked to full-size images in ~/Images1 directory, organized into 4 columns per row, with two-part title (first part My Images followed by (shared via ThumbnailSet)).

ThumbnailSet assumes that a thumbnail's filename is the same as its corresponding full-size image's filename (though that can be changed if you want to write some C# code). But don't worry - it has never been easier to resize images while preserving filenames, thanks to this script.

There is a two-part title (just two <asp:Label> controls) placed on top of the thumbnail table. I used two Labels so that two different styles can be applied to the title (my customization compromise as opposed to embedding a Panel or providing a template option).

Another customization compromise is that I hardcoded CSS class names for components of this control. If you prefer to set CssClass properties yourself, you'll need to write a few lines of C# code. The appearance of ThumbnailSet can be customized by defining those CSS classes (see below for their names). A sample *.css file is included in the source download.

All Properties

StartTitle First part of title. CSS class for it is ThumbnailSetStartTitle.
EndTitle Second part of title. CSS class for it is ThumbnailSetEndTitle.
ThumbSrc The directory where the thumbnail files are located.
ImgSrc The directory where the full-size images are located. Note that the image filename must be the same as its corresponding thumbnail in ThumbSrc directory.
ThumbFilePattern Wildcard pattern for thumbnail image files. ("*.jpg", for example). Default is "*".
ImgFilePattern Wildcard pattern for full-size image filenames ("*.jpg", for example). Default is "*".
ColumnsPerRow Number of columns in one thumbnail row. Default is 3.
ExcludeNames Comma-separated list of filenames to exclude from the thumbnail table. Use this if desired files cannot be specified with just ThumbFilePattern wildcard.
ThumbCellPadding Padding of cells in the thumbnail table. Default is 5.

Other CSS class names are: ThumbnailSetTable (for the main table) and ThumbnailSetTableHeading (for common properties of Start and End titles).

How It Works

The code behind uses DirectoryInfo object to get two lists of filenames from thumbnail and full-size image directories. It then iterates over the thumbnail list, checks that the corresponding image exists in the full-size image list, and adds the thumbnail image to a new table cell.

protected void Page_PreRender(object sender, EventArgs e)
{
    ReadFileNames(ThumbSrc, ThumbFilePattern, ExcludeNames, ref thumbFiles);
    ReadFileNames(ImgSrc, ImgFilePattern, ExcludeNames, ref imgFiles);

    int curColumn = ColumnsPerRow;
    int curRow = -1;
    foreach (string thumb in thumbFiles)
    {
        if (imgFiles.IndexOf(thumb) >= 0)   	// need to make sure the full image 
					// for the thumbnail exists
        {
            if (curColumn >= ColumnsPerRow) 	// create new row?
            {
                ThumbTable.Rows.Add(new TableRow());
                ++curRow;
                curColumn = 0;
            }

            HyperLink hl = new HyperLink();
            hl.ImageUrl = ThumbSrc + "/" + thumb;
            hl.NavigateUrl = ImgSrc + "/" + thumb;

            ThumbTable.Rows[curRow].Cells.Add(new TableCell());
            ThumbTable.Rows[curRow].Cells[curColumn].Controls.Add(hl);
            ++curColumn;
        }
    }
}
...
// Reads file names from the given directory.
//
protected void ReadFileNames(string dir, string pattern, string toExclude, ref List<string /> l)
{
    DirectoryInfo di = new DirectoryInfo(Server.MapPath(dir));

    if (di.Exists)
    {
        if (l == null)
        {
            l = new List<string />();
        }
        List<string /> names = new List<string /> (toExclude.Split(','));

        FileInfo[] rgFiles = di.GetFiles(pattern);

        foreach (FileInfo fi in rgFiles)
        {
            if (names.IndexOf(fi.Name) == -1)   // not found in the exclusion list
            {
                l.Add(fi.Name);
            }
        }
    }
}

History

  • 4th October, 2009: Initial version

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

Sergey Vasilevskiy

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 6 Oct 2009
Article Copyright 2009 by Sergey Vasilevskiy
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid