ThumbnailSet ASP.NET User Control

Oct 5, 2009.

Introduction

When creating the Odessa Pictures page for my site (www.sergeyv.com) I was faced with a dilemma - repeat <a> and <img> tags for every thumbnail image (and there are many!), or come up with a more automated solution? After not much deliberation, I chose the latter.

The result is an ASP.NET User Control with which one can easily display all thumbnail images in a given directory. I hope you will find it as useful and time-saving as I did! I'm releasing this User Control into Public Domain, free to use and modify for all.

Description

ThumbnailSet displays thumbnail images organized in tabular format and hyperlinked to full-size images. You can specify the number of columns (number of rows is determined by the number of files).

The only requirement is that thumbnail's filename is the same as the actual image's filename (even that can be changed if you want to write some C# code).

To resize images while preserving filenames you can use this script.

Here is an example of ThumbnailSet:

Sample usage:

                <uc1:ThumbnailSet ID="ThumbnailSet1" runat="server" 
                    StartTitle="StartTitle" 
                    EndTitle="EndTitle" 
                    ThumbSrc="~/HistoricalCenter/thumb" ThumbFilePattern="*.jpg"
                    ImgSrc="~/HistoricalCenter" ImgFilePattern="*.jpg"
                    ColumnsPerRow="4"
                />
As you can see, the title is split into two properties (StartTitle and EndTitle), so that two different styles can be set for it.

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 to use it in your project

Unpack ThumbnailSet.ascx and ThumbnailSet.ascx.cs into some directory on your website. Let's say it's ~\UserControls. Then add this line after the @Page directive on the .aspx page where you want to use the control:

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

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.

Download

Download source (3KB)