Remote thumbnails with Heroku and Imagery

We got our golden ticket to Harmony a few weeks ago and I have to say it is easily the best CMS I have ever used. The only thing we really missed from Mephisto is support for thumbnailing uploaded images. This is on the radar for Harmony in the future, but we wanted something now so we decided to come up with a solution ourselves. I vaguely remembered reading about Imagery on the Weekly Digest a while ago and it looked like it might be a good fit, so I dug into the code.

Imagery describes itself as an “Image server / proxy that can resize images on demand based on common file prefixes ( such as _small, _medium ) and apply other rmagick effects. Supposed to be used between a Squid/Varnish and S3.” Tobi has built this for Shopify and it looks like they are using it in production, which was all the endorsement that I needed.

Heroku is now our first choice for hosting web apps so I decided to modify Imagery to run within their constraints. This mostly consisted of removing code that was already being handled by Heroku infrastructure and swapping SyslogLogger for Rack::CommonLogger. You can check out the changes we made on this fork.

Usage

To demonstrate how our setup works lets take a look at the Harmony logo above. The original image is a piece of template data attached to this blog post and lives here:

http://lucidcode.co.nz/assets/4b70dca0dabe9d5d3700003e/harmony-app.png

The resized image above that we serve from Heroku lives here:

http://images.lucidcode.co.nz/assets/4b70dca0dabe9d5d3700003e/harmony-app_medium.png

To transform the URL we can use a bit of liquid in the blog template:

{{ item.data.image | assign_to: 'image' }}
{{ image.filename | split: '.' | join: '_medium.' | assign_to: 'filename' }}
http://images.{{ site.domain }}{{ image.url | replace: image.filename, filename }}

To tidy up the template you might want to put this code into an include and reference it in the template like this:

<img src="{% include 'image' %}" />

Now we just need to point the images subdomain of lucidcode to proxy.heroku.com and add it as a custom domain to our heroku app and we are good to go. The “_medium” suffix corresponds to this transformation from Imagery:

Imagery::Transformations.register :medium do |image|
  image.change_geometry("240x240>") { |x, y, image| image.resize!(x,y) }
end

To select another image size or effect have a look at all the available transformations and simply replace the “_medium” suffix with another one of you choosing.

The only issue I came across hosting Imagery on Heroku is that your cache is cleared on every deploy. This means if you wanted to update the code or add a new transformation you would have to regenerate all the thumbnails. This may not be an issue for you if expect your deployment to be quite static.

Future Plans

Another feature we are thinking about is the ability to dynamically specify the thumbnail transformations. So instead of hardcoding the _medium suffix into imagery you could specify the transformation as a GET parameter like this:

http://images.lucidcode.co.nz/assets/4b70dca0dabe9d5d3700003e/harmony-app.png?resize=240x240

There is the potential for DOS attacks with this approach however, and some sort of transformation whitelist for each site or SHA authentication would be necessary to ensure against this. For now though we are happy with the global whitelist of transformations that Imagery provides out of the box.

So now we have no excuse to not use Harmony for every website project from now on. If you haven’t done so already I would encourage everyone reading this to go and check it out and sign up to be notified when it goes public. I don’t think you’ll be disappointed.

Posted on February 10, 2010 by Isaac

4 Comments

1. Steve Smith — February 16, 2010

   This is a great solution, guys, and gives us a few ideas of how Harmony can support something like this in the future. We’re excited that you’re loving Harmony!!

2. John Nunemaker — February 15, 2010

   Great post. Can’t wait to figure out how best to integrate features like this with Harmony. It is really fun to see people think outside the box and extend what we already have in place. Thanks for the write up!

3. Isaac Kearse — February 16, 2010

   Hey Guys, thanks for the feedback. And thanks for all your work on Harmony. The additions you’ve made to Liquid make extensions like this super easy.

4. AzariahetBard — October 23, 2011

   Hello. And Bye. cnmwnicmxricmx,er mrfpwrermcegm ericmercmeecec

Leave a Comment