• Download source - 7.89 KB

Introduction

This article presents an effective and organized way to display mass amounts of images on websites.

This article assumes:

• You have experience with ASP.NET

Usage

Many times, with large membership based websites, images are collected and the pages are slow to load or poorly organized. This creates frustration for the users and for the webmaster trying to maintain it. Using thumbnails for selection provides the users with a preview of the image that they may choose to view. Due to the small size of thumbnails, it is quicker to load, than to have all the images full size, to load at once.

Design

The design of the Image Gallery is intuitive. It displays the picture above the selection, and centers it. The design of the Image Gallery is borrowed from Windows XP's "My Pictures" filmstrip view.

Data Storage

The data, image name, category, year, etc., are all stored within an XML file. This prevents the code from searching the directories every time it is accessed. The first table of the XML file is the table that holds all the section/category information. With this Image Gallery, all images are stored in: Images/section_name/type_year/images/. This folder structure organizes all the images into easily manageable sections.

The Code

The code is divided into three major parts: the section selection page, image submission, and display of the images.

Image Submission

The image submission page contains a different form type. Because it is accepting file data, it should be set to multipart/form-data. In addition, the control that allows the user to select files is the input type of file. All of this is shown in the included example file, SubmitImage.aspx. When the user submits the image, a post back is called to the server. The post back calls the proper function and streams the file to the server, which then creates a scaled thumbnail also. If a new section is to be created, the function creates the folder and appends the XML file with the new folder information.

Section Menu

The Image Section menu is generated from the first table of the XML file. This parses the section data out into a DataTable, which is bound to a DataGrid.

Image Gallery

The Image Gallery accepts query strings, which tell it what table the data is located. This sets the main image as an asp:Image, and creates a Panel, generated by a MetaBuilders control. This also gives members with administrative roles, the ability to remove images.