Paperclip image.url in Backbone.js Views - ruby-on-rails

Question

I am using paperclip to save images. Everything works fine and I am able to access the item's url with #item.image.url.
class Item
has_attached_file :image, :styles => {
:original => ['1920x1680>', :jpg],
:small => ['100x100>', :jpg],
:medium => ['250x250>', :jpg],
:large => ['500x500>', :jpg]
}
end
This is console:
> Item.last.image.url(:small)
=> "/system/images/items/1/small/chanel.jpg?1334005208"
This is straightforward and easy if I am templating HAML or ERB from the server and serving up the page to the user like this. items/show.html.haml:
.item
.item-image
= image_tag #item.image.url(:small)
However, with backbone.js, I am unable to construct the URL because I do not have the paperclip helpers in context. Essentially, I am sending the following attributes of the image to the page in json form.
#<Item:0x007fc97559b960> {
:id => 1,
:image_content_type => "image/jpeg",
:image_file_name => "chanel.jpg",
:image_file_size => 28880,
:image_updated_at => 2012-04-09 21:00:08 UTC
}
What is a ninja way to get the image.url included as an attribute on the item. How do I account for the style URLS? It would be nice to have an attribute like "image_small_url", "image_normal_url", etc predetermined and accessible. Thoughts?

Answer 1

I'm using Jbuilder to build the JSON views for a project I'm working on, so my index view, for example looks like this:
json.array!(#things) do |json, thing|
json.id thing.id
json.name thing.name
json.description thing.description
json.image_url thing.image.url
json.thumb_url thing.image.url(:thumb)
end
That way in my Backbone template, I can just say thing.get('image_url') and thing.get('thumb_url').
In brief, you'll want to use something like Jbuilder, or manually override as_json in your model. Personally, I like taking care of this at the view level, which is what Jbuilder allows you to do easily.

Answer 2

While generating JSON in controllers is doable, I greatly prefer wrapping up this kind of functionality in either decorators (e.g., Draper), or into frameworks designed for RESTful resources (e.g., Roar).
This keeps the mapping between models and their external representations highly localized, allows direct testing of representations outside of the web app framework, and so on.
For example, clem's answer would be isolated within a single class, roughly:
class ThingDecorator < Draper::Decorator
delegate_all
def image_url; object.image.url; end
def thumb_url; object.image.url(:thumb); end
end
Then in the controller, for example:
#things = Thing.some_scope.decorate # Or
#things = ThingDecorator.decorate_collection(Thing.all)
(Or whatever you need, and what works depends on the Rails version, see the Draper docs.)
Then expose the collection as JSON using normal means. IMO this is almost always cleaner.

Answer 3

Another simple example using jbuilder:
# index.json.jbuilder
json.array!(#shared_snap_casts) do |shared_snap_cast|
json.extract! shared_snap_cast, :id, :snap
end
Here the :snap is the paperclip attachment - the output from this example is:
[{"id":1,"snap":"/system/shared_snap_casts/snaps/000/000/001/original/some_icon.png?1388093936"}]
Hope this helps!