Skip to content

Aviary Phoenix Online Image Editor Integration

Squeegy edited this page Sep 12, 2010 · 6 revisions

Fleximage provides some hooks to allow users to edit images in Phoenix, the online image editor by Aviary.

The approach of fleximage will work best with a RESTful controller, dedicated to managing a single Fleximage model. Let’s say a class named Photo.

Localhost isn’t gonna work.

Before you play with Aviary in development, you have change the way you get to your local app server. The Aviary API works by passing a URL to an image to edit. If that URL starts with http://localhost:3000 then Aviary will have no clue how to get your image. So you need to use an address that allows Aviary to pull image data from your development machine.

In order to test on your local app server during development you need to use a real IP address. Start by going to your external IP (http://whatismyip.com/) and see if that works. For example:

http://1.22.333.123:3000/

If that doesn’t work, you may need to edit your router settings to route port 3000 to a local IP on your network that is your development machine. Once you get the site accessible on this external IP address, you can test Aviary integration.

In production when the site is live on it’s own domain, this is not a concern at all and should just work.

Your API key

Get an API key here: http://aviary.com/apidocs
Then simply create a new initializer in your app and set it.


#config/initializers/aviary_api_key.rb
Fleximage::AviaryController.api_key = 'myApiKeyHere'

The Controller

All the interaction with Aviary is handled in the controller. To make things simple, there is a controller class method editable_in_aviary which enables a controller with a few hooks that can talk to the Avairy API. You want to pass in the Fleximage enabled class that you will be editing images for.


#photos_controller.rb
class PhotosController < ApplicationController
  editable_in_aviary Photo

  # plus the standard restful controller actions...
end

Link to Aviary

Fleximage adds a helper named link_to_edit_in_aviary

link_to_edit_in_aviary(text, model, options = {})

Clicking a link created by this helper will open the Phoenix editor in a new window with the master image for this record ready for editing. When the user saves the image, Aviary posts the image back to your application where your controller saves it with the corresponding record.


#photos/show.html.erb
<%= link_to_edit_in_aviary 'Edit Photo', @photo %>

Future

That’s all there is to it. Support right now is young and rigid, so patches to make this a bit more flexible sure are welcome.