Click here to Skip to main content
Click here to Skip to main content

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

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.

License

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
Architect support.com
Australia Australia

Comments and Discussions

 
Questionsmall problem Pinmemberclaygorman22-Aug-07 15:41 
GeneralThis is great - one request for next / previous PinsussJosh L29-Aug-05 16:49 
GeneralVery good job in several respects PinmemberGery Dorazio5-Dec-03 17:39 
Generalpics are broken... Pinmembereggie518-Oct-03 18:55 
GeneralRe: pics are broken... PinmemberGery Dorazio5-Dec-03 17:25 
QuestionHow to Setup a Nondefault Path?? PinmemberSteven Carleton6-Jul-03 8:32 
AnswerRe: How to Setup a Nondefault Path?? PinmemberDan Glass12-Jul-03 20:36 
GeneralHuge memory problem Pinsussdborosev10-Jun-03 12:36 
GeneralBravo Pinmembermailtrashbin3-May-03 13:55 
GeneralRe: Bravo PinmemberDan Glass7-May-03 7:27 
GeneralWorked as well Pinmemberron12914-Apr-03 5:52 
GeneralWorked with a few minor tweaks Pinmembermailtrashbin6-Apr-03 11:29 
GeneralRe: Worked with a few minor tweaks PinmemberDan Glass6-Apr-03 20:26 
GeneralDoesn't work Pinsussanonymous1231-Apr-03 14:50 
GeneralRe: Doesn't work Pinmemberdanglass2-Apr-03 9:06 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 28 Apr 2003
Article Copyright 2003 by Dan Glass
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid