ThumbnailSet ASP.NET User Control

• Download source - 2.35 KB

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 l)
{
    DirectoryInfo di = new DirectoryInfo(Server.MapPath(dir));

    if (di.Exists)
    {
        if (l == null)
        {
            l = new List();
        }
        List names = new List (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

• 4^th October, 2009: Initial version