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
<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.
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" %>
<uc1:ThumbnailSet> tag on the *.aspx page. Here is an example:
<uc1:ThumbnailSet ID="ThumbnailSet1" runat="server"
EndTitle="(shared via ThumbnailSet)"
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.
|First part of title. CSS class for it is |
|Second part of title. CSS class for it is |
|The directory where the thumbnail files are located. |
|The directory where the full-size images are located. Note that the image filename must be the same as its corresponding thumbnail in |
|Wildcard pattern for thumbnail image files. (|
"*.jpg", for example). Default is
|Wildcard pattern for full-size image filenames (|
"*.jpg", for example). Default is
|Number of columns in one thumbnail row. Default is 3. |
|Comma-separated list of filenames to exclude from the thumbnail table. Use this if desired files cannot be specified with just |
|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)
if (curColumn >= ColumnsPerRow)
curColumn = 0;
HyperLink hl = new HyperLink();
hl.ImageUrl = ThumbSrc + "/" + thumb;
hl.NavigateUrl = ImgSrc + "/" + thumb;
protected void ReadFileNames(string dir, string pattern, string toExclude, ref List<string /> l)
DirectoryInfo di = new DirectoryInfo(Server.MapPath(dir));
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)
- 4th October, 2009: Initial version