Click here to Skip to main content
13,198,563 members (55,393 online)
Click here to Skip to main content
Add your own
alternative version


44 bookmarked
Posted 26 Mar 2003

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

, 27 Apr 2003
Rate this:
Please Sign up or sign in to vote.
Web Image Browser with directory explorer and thumbnail/web friendly on-the-fly image creation and caching.

Sample Image - ImageBrowser.jpg


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.


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.


  • .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.


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!)


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


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Dan Glass
Australia Australia

You may also be interested in...

Comments and Discussions

Questionsmall problem Pin
claygorman22-Aug-07 15:41
memberclaygorman22-Aug-07 15:41 
GeneralThis is great - one request for next / previous Pin
Josh L29-Aug-05 16:49
sussJosh L29-Aug-05 16:49 
GeneralVery good job in several respects Pin
Gery Dorazio5-Dec-03 17:39
memberGery Dorazio5-Dec-03 17:39 
Generalpics are broken... Pin
eggie518-Oct-03 18:55
membereggie518-Oct-03 18:55 
GeneralRe: pics are broken... Pin
Gery Dorazio5-Dec-03 17:25
memberGery Dorazio5-Dec-03 17:25 
QuestionHow to Setup a Nondefault Path?? Pin
Steven Carleton6-Jul-03 8:32
memberSteven Carleton6-Jul-03 8:32 
AnswerRe: How to Setup a Nondefault Path?? Pin
Dan Glass12-Jul-03 20:36
memberDan Glass12-Jul-03 20:36 
GeneralHuge memory problem Pin
dborosev10-Jun-03 12:36
sussdborosev10-Jun-03 12:36 
GeneralBravo Pin
mailtrashbin3-May-03 13:55
membermailtrashbin3-May-03 13:55 
GeneralRe: Bravo Pin
Dan Glass7-May-03 7:27
memberDan Glass7-May-03 7:27 
GeneralWorked as well Pin
ron12914-Apr-03 5:52
memberron12914-Apr-03 5:52 
GeneralWorked with a few minor tweaks Pin
mailtrashbin6-Apr-03 11:29
membermailtrashbin6-Apr-03 11:29 
GeneralRe: Worked with a few minor tweaks Pin
Dan Glass6-Apr-03 20:26
memberDan Glass6-Apr-03 20:26 
GeneralDoesn't work Pin
anonymous1231-Apr-03 14:50
sussanonymous1231-Apr-03 14:50 
GeneralRe: Doesn't work Pin
danglass2-Apr-03 9:06
memberdanglass2-Apr-03 9:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 28 Apr 2003
Article Copyright 2003 by Dan Glass
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid