13 Jun 2011

Cornish "Showcase" Image and Video Gallery

  • Cornish Showcase Overview
  • Cornish Showcase Frontend UI
  • Cornish Showcase Frontend Thumbnails
  • Cornish Showcase ExpresionEngine Backend

Click to view site

One of the major goals of the recent redesign at Cornish was to make student work a more prominent part of the college website. We also wanted to make it faster and easier to manage both images and video through our existing CMS, ExpressionEngine. The solution involved two parts: a JSON-eating, jQuery powered frontend "Showcase" gallery, and a re-engineered backend integrating both custom and commercial Expression Engine modules.

Frontend

The frontend gallery is implemented in jQuery/javascript. New galleries can be added to any page on the site simply by adding a regular link. We use the link's HTML5 data attribute to determine which Showcase to launch, while the link's href attribute points to a fallback HTML page for users who don't have javascript enabled.

Once the Showcase interface is open, the focus is clearly on the media. UI elements are small and unobtrusive, and the overall experience will be familiar to users who've interacted with a "lightbox" style image viewer before (Facebook, etc). Users may click left and right to look through media sequentially, or may open a thumbnail collection of all the media in a given gallery.

Each media item has a unique URL which can be shared or bookmarked. We currently achieve this using the jQuery Address plugin. This works pretty well, but results in some fairly ugly URLs. As support for the HTML5 History API becomes more widespread we'll hopefully be able to transition to that.

Backend

The showcase is powered by JSON-formatted data emitted by Expression Engine using custom templates. All images are resized automatically on upload. Thumbnails are also created automatically, freeing users from having to worry about this part of the process and allowing non-technical users to upload and manage media.

I also created a custom module linking Expression Engine to the Cornish Vimeo-Plus account. Through this linkage, a content manager only needs to provide the Vimeo ID of a given video, and everything else is taken care of automatically. Using the Vimeo API, we're able to pull video thumbnails and any other pertinent information, vastly simplifying the process of adding video to the site.