Creating ASP.NET Photo Album using FileSystem as Data


Memories Photo Album is asp.net application which allows you to easily create online photo album just by specifying folder containing subfolders and images. I created this application to share personal photos with friends and family, last month I converted it to .Net Framework 2.0 and decided to share with community.

What kind of Photo Album it is?

It's a simple web application which watches the folder containing your images and displays it as an organized web based album. It caches folder structure on first request so that next request is quick, caching mechanism has dependency over your folder structure so when you make changes in folder it automatically deletes cache.

It creates thumbnails and resized images dynamically on first request to that image. To make navigation easy it displays bread crumb which will allow you to navigate to parent.

It's file system based and do not use any database. It does not have any user interface to allow upload of images, but you can always create ftp or simple web application to allow others to upload images, but frankly if you are looking for album where users can upload images then this application is not for you, this application will be ideal for you if you have big folder structure with images and you want to put that online.

How to install application?

1) Create new website in IIS and unzip all source code files into application directory, make sure that new website uses .Net 2.0

 .Net Version 2.0 in IIS

2) Open web.config file with any text editor and make changes according to your requirement, Settings have following properties.

  • Title as name suggests is title of your web application.
  • AlbumPath is the physical path of folder containing photos, this folder can have any numbers of sub folders, just make sure that your web application has read permission on that folder.
  • TempPath is the physical path of folder where application can create temporary thumbnails and images, application needs write access on this folder.
  • DescriptionFile is name of file that application reads and uses its contents as description of folder, description can contain html tags.
  • CSSStylePath is relative path of cascading style sheet.
  • PageSize is number of thumbnails to be displayed in one page.
  • HostHeader is hostname of application, if you are testing this application on your local IIS then use localhost other wise use actual hostname like www.yoursite.com
  • UICulture use en-US for US-English,  if you want to use another culture then you will have to create resource file for that culture and drop in App_GlobalResources folder
  • FileTypes lists type of files you want to display for now use only .jpg, you might need to change code if you want to support other types of files.
  • PropertyExtractorPlugins is list of plug-in that can extract metadata information from image you can create your own plug-in but it has to inherit from Memories.IPropertyPlugin, application has a plug-in which extracts Windows XP Title and Comment information from image.

Following is typical web.config for virtual application on your localhost.

 Web.config for localhost

3) Your application is ready, open your browser and point to your newly created website.

Folder structure in your AlbumPath.

Although application can handle any kind of folder hierarchy, home page will show only two level deep folder structure. Following is screen shot of folder structure and application running on that folder structure.

 Folder suructure on file system

 Home page of album

Multiple applications under same source tree.

Application supports multiple albums hosting under single source tree, all you need to do is add additional host information in IIS and then add additional settings for another host in web.config file, you can also make them look graphically different by specifying different Style Sheet.

Following images shows IIS settings and web.config file for multiple albums.

 Multiple domains in IIS

 web.config for multiple domains

Title and Comments in images.

ExifPropertyPlugin extracts WindowsXP's Title and Comments, if  Title and Comments are present in image then they are displayed on image detail page. I am using open source MetaDataExtractor to extract exif information its lot faster then methods based on GDI+. application is designed in such a way that you can add your own Extractor.

End Notes.

I hope you will find this application helpful for sharing your personal photos with your friends and family, I am currently using this application to host 4 albums under same source tree with total 3000 Images. I have attached full source code of application feel free to contact me if you have any problems or questions.

Run sample application

Next Recommended Readings