Web Image Browser - Lots of images and no time to publish them?

• Download source files - 32 Kb

Introduction

The Image Browser works by dynamically displaying the images in a directory, while caching them. It also caches a version of the picture that is more web friendly - I have made it 640X480. I found an algorithm from Christian Graus at CodeProject. Image.GetThumbNailImage() did not have good enough quality. You may put directories in directories - it will recurse. You can see a full example of this running on my personal site.

Overview

There are 2 controls, one that displays the thumbnails for the directories and images, and one to show the web friendly image.

It works by pointing the image browser to a directory, and it will analyze the directory for subdirectories and images, and create a navigable control from that.

Subdirectories will be represented with a folder icon or a picture if you name it the same as the directory. It may be clicked on to navigate to that directory.

Thumbnails will be created from all the images, and placed in a thumbs directory. Clicking in one will bring you to the WebImage control.

The WebImage control creates a new image that is 640X480 (around 28k) and puts it in a webpics directory. Clicking on it will load up the full image.

A top navigation with links is also rendered.

Interesting bits

I created some helper classes to break out the functions of creating a website out of a directory tree of images. The break down was like so:

• ImageWrapper: This is the web representation of the image in its various forms - links, source, thumbnail, web image, and actual image.
• SubDirectoryWrapper: This is the web representation of a subdirectory, it is queried for its link, image representation etc.
• DirectoryWrapper: This is a container for the all the image and subdirectory objects.

The HtmlTools and ImageTools hold all the meat of rendering. The HtmlTools class has methods to create a table full of images with links, while ImageTools handles all the image resizing and reading/writing them to disk.

Requirements

• .NET framework
• Visual Studio .NET
• IIS & an understanding of it

Simple setup

Download the above zip file and unzip it to your wwwroot directory, i.e. C:\Inetpub\wwwroot\ (Not ImageBrowser, the directory will be created). Put your pictures into C:\InetPub\wwwroot\pics.

Open IIS Manager and right-click on the ImageBrowser directory, and click properties. On the 'directory' tab, click 'create' in the applications setting area.

Notes

To display a directory as an image instead of the default image, name an image the same as the directory (inside it).

• To display some text for a particular directory, name a file <directory name>.txt and put your words of wisdom into it (supports HTML too).
• Thumbnails will be cached to a directory called \thumbs, and the web friendly pictures to \webpics.
• If you need to refresh you thumbnails or web pics, just delete the directories (or picture).
• You can browse to FillCache.aspx to control the cache. (Backup your pictures before testing this feature!)

Downloads

Note: I have updated the source to fix the reported bugs and feature requests. BEWARE: Use the FillCache.aspx page at your discretion.