Creating a Photo Gallery, Part #3
In Part #1, we worked out the groundwork for uploading our image. We figured out how to create and implement an IHttpHander interface in Part #2 that delivered both a full-size and thumbnail image of our stored photos. Now, in Part #3, we’re ready to tie them to together and create a ‘gallery’.
For a PDF version of this post, click here.
In this part, we’ll:
- Use the DataList control to display out our photos,
- Use the previously created SqlPhotoHandler to get both thumbnails and full photos on the fly,
- And provide the basis for implementing galleries using the query string.
Configuring the Data List
Now that we’ve built our upload tool and our HttpHandler to browse our images, we’re ready to have a ‘gallery’ viewer. The easiest way to handle this would be via a DataList. I honestly wish I knew how to get GridViews to display horizontally, like a DataList, but my research hasn’t turned up anything. There is a way to do paging in a DataList, using components from ASPNET4U [link], however, that is a bit beyond the scope of this document.
To begin, create an empty ASPX page, we’ll call it ViewGallery.aspx, and add two objects-a DataList and a SqlDataSource. Remember, if you’re using a MasterPage, right-click your Master Page and “Add Content Page” to automatically link the pages.
Configure the SqlDataSource
The SqlDataSource should be configured before we start on the DataList, so use it’s Smart Tag and let’s configure it. We need to capture the photo_id and the description from our data source; however, for the future, we want to ‘WHERE’ it by the gallery_id. Simple enough. Why do we not need to query out our image? Because our SqlPhotoHandler HttpHandler will be doing that work for us.
SELECT [photo_id], [description] FROM Photos WHERE [gallery_id] = @gallery_id
On the next screen, we can add our QueryString parameter. I recommend choosing a default value, such as 1 (or whatever your ‘default’ gallery is) to avoid errors when a gallery is not specified. Preview your data and then finish out of the Configure Data Source. We’re ready to configure our Data List.
Associating and Configuring the Data List’s ItemTemplates
After you associate your DataList to the SqlDataSource, I recommend using a custom template. These “ItemTemplates” allow full flexibility rather than the standard column bindings.
To access the templates, click the Smart Tag > Edit Templates. Now, from here, I prefer Source View. You can drag, drop, and configure the controls using the GUI Designer; however… it just seems a bit chunkier than editing in Source View.
Inside your <ItemTemplate> tags, it has all the flexibility of any HTML editing location. The code for my ItemTemplate is as follows:
<div style=”text-align: center;”>
<a href=’SqlPhotoHandler.ashx?photo_id=<%# Eval(“photo_id”) %>’ target=”_blank”>
<img alt='<%# Eval(“description”) %>’ class=”thumbnailImage” src=’SqlPhotoHandler.ashx?photo_id=<%# Eval(“photo_id”) %>&thumbnail=true’ style=”border: solid 1 black;” />
<p><%# Eval(“description”) %></p>
What does this code do for us?
Now we have a simple DataList that outputs an image (that is linked to the full-size image) and the description from the database. You could get a lot more creative here, but I’ll leave that to you-I added the ‘Professional’ style and linked each object to its own CSS class for later use.
We’re ready to try it out! Upload a few more pictures and try out the Viewer.
There we go! Even a picture of my dog made it through the project!
At this point, we have the basic groundwork for our photo gallery created. We, however, are ready to go back and do a bit of fine tuning.
- Code cleanup! Remember all of those messy classes? Let’s OOP them!
- Further renovation of our Data List to enable paging (there are a few articles out there on how to do it without third-party controls),
- Navigation: Using both telerik’s rad Menu and the ASP.NET 2.0 menu controls-how can we get around our new application?
- Gallery functionality: creating galleries, moving photos between galleries, etc.
- Photo functionality: resizing, renaming, watermark on the fly, etc.
What would you like to see?