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.
