Introducing AssetGallery

Tuesday, January 03, 2012, at 03:40AM

By Eric Richardson

I signed up for a Flickr account in January of 2005. Over the next six years I uploaded 8,700 photos, starting with things like trip pictures and shots from around L.A. and gradually ending up using it mostly for photos intended for blogdowntown.

I stopped using the site a year ago, though, after implementing a system in the blogdowntown code that could handle uploads locally. I took that code with me to KPCC, creating the basis of the system that we've since released as AssetHost.

This weekend I took the time to start a project that would bring my photo needs full-circle: a gallery application based on AssetHost that could archive those old sets that I had uploaded to Flickr in the past. The result is AssetGallery, and while it's a long way from finished, the project makes for a good summation of what I'm interested in right now in terms of things like Ruby on Rails, mountable engines, CoffeeScript and Backbone.

I'm still running imports to pull in my Flickr sets, but you can see my AssetGallery installation here.

The Starting Point

Obviously there are plenty of photo gallery applications out there, but I've never been much for just plugging in someone else's code when I could spend more time sitting down to write something of my own.

In this case, though, I had a good starting point: AssetHost is built to manage most of the dirty-work of ingesting and hosting images, so really all I needed was a few models to represent the set concept and a UI in front of it.

Building an Engine

This site is a Ruby on Rails app that I recently ported to 3.1, so it made a good starting point to try out the new mountable engines that were introduced in Rails 3.0.

The basic idea is that AssetGallery gets built as a self-contained gem that is then easily pulled into the host application.

In the Gemfile for this site:

gem 'asset_gallery', :git => "git://github.com/ewr/AssetGallery.git"

Running bundle install pulls the engine into the app, after which we need to add its database migrations:

rake asset_gallery:install:migrations
rake db:migrate

Then it is just a matter of attaching the app in config/routes.rb:

mount AssetGallery::Engine => '/gallery', :as => :gallery

Inside AssetGallery, writing for an engine is almost identical to writing any normal app code, with the exception that some pieces need to be explicitly called using the engine's namespace.

When doing local development, just tell bundler to look at your local version of the engine gem instead of at github:

gem 'asset_gallery', :path => "/Users/eric/rails/AssetGallery"

Backbone

On the frontend side, I decided to go ahead and play with making the set viewer a Javascript app built in Backbone.js.

In the Rails view, I generate a JSON object for the photoset that includes our local caption and ordering, plus all of the AssetHost data (tags, sizes, etc).

    var agSet = new AssetGallery.SetViewer(
    <%= raw @set.set_assets.to_json %>,
    {
        el:     "#ag_set_viewer",
        path:   "<%= set_path(@set) %>"
    }
)

Inside the SetViewer class, Backbone models are created for Asset and Assets (model and collection), views are set up for the set and each slide, and a router is put in place to handle changing views between them.

Structurally, I decided to play with setting the views next to each other and sliding the viewport, but that's just visual candy.

CoffeeScript

After initially resisting it, I've lately come to love doing Javascript work in CoffeeScript.

When you look at a piece of code like set_viewer.js.coffee, I think the result of the stripped-back syntax is a much more readable piece of code than you would get otherwise.

Next Steps

Right now the code is pretty dumb and just loads up all images at once, but it would be an easy progression to put the smarts in place to lazy-load slide images on-demand.

I also need to add in a traditional slideshow view, probably as an interim step between the grid and the detail page, which could probably also use some support for comments.

Even right now, though, the combination of AssetHost and AssetGallery gives me a nice start toward not bothering to have to pay for my Flickr renewal next time it rolls around.