Time for the Gallery

30 Dec 2010 23:10
Last Modified
13 Jan 2013 18:18

While reminiscing about watching Take Hart, I decided that I needed a gallery. This would serve as an area to store images such as screenshots of the projects I am working on.

I opted for the following URL structure:

  1. http://{domain}/blog/gallery for all galleries
  2. http://{domain}/blog/gallery/{name} for all images in a given gallery
  3. http://{domain}/blog/gallery/{name}/{index} for a particular image in a given gallery

I added a new gallery controller to the blog engine, and added an index view for the galleries, as shown below in Figure 1. Each gallery has a thumbnail image, a title and a description. Image counts are shown for each gallery.


Figure 1. Example galleries.

The gallery index view links to an index action of an image controller, and the view for a particular gallery is shown below in Figure 2. Each image is shown as a thumbnail (created manually), along with a title. I opted for a square thumbnail to avoid issues with different aspect ratios, and paging is enabled.


Figure 2. An example gallery.

The image index view links to the detail action, and the view for a particular image is shown below in Figure 3. The image is shown along with a description. 'Previous' and 'Next' links are included.

Gallery Image

Figure 3. An example image in a gallery.

In order to add images, I transfer them to them to the web server (e.g. using ftp), then "add" images to a particualr gallery by specifying the location of the thumbnail and image itself, along with the title and description in an edit view. This metadata is stored using a similar repository to the posts (currently XML) though this could be easily changed.


Ali Khalid
8 Feb 2011 16:43
Nice galleries

Add Comment