-
Notifications
You must be signed in to change notification settings - Fork 49
Rendering
To actually create a template to render the image we create a special view with a .flexi extension. This view template will pull out the master image for you, tranform it as needed, and send it to the browser as binary data.
The filename of the template should look like this: app/views/controller_name/action_name.jpg.flexi</tt>, where @action_name is the controller action that will render this view. The jpg tells the controller to render this view when the jpg format is asked for. The flexi tells Rails to render this view with the Fleximage template engine, rather than erb or builder or other template types.
The syntax of the view is pure ruby, but to process the image the view needs to call operate on the instance of your model. This lets Fleximage know which instance variable contains the image that needs to be processed and sent out.
Here is the view to render a Photo record at 320×240:
# app/views/photos/show.jpg.flexi
# Acessed via http://mysite.com/photos/123.jpg
@photo.operate do |image|
image.resize '320x240'
end
Calling @photo.operate { |image| .. } prepares the model object for image processing and yields a an object image that will allow you to perform image transformations. The above example just resizes the image to 320×240, however many other Operators are included with Fleximage.
Here is a .flexi template that will do much more:
# app/views/show.jpg.flexi
@photo.operate do |image|
image.resize '640x480', :crop => true
image.image_overlay 'public/images/logo.png',
:alignment => :bottom_right,
:offset => '20x20'
image.border :size => 10, :color => 'green'
image.text 'I like Cheese'
image.unsharp_mask
image.shadow
end
The above template will:
- Resize the image to exactly 640×480, cropping off any extra.
- Add a logo 20 pixels form the lower right corner
- Add a green 10 pixel border
- Write “I like Cheese” in the upper left corder
- Sharpen the image
- Add a black drop shadow on a white background
See the Operators page for a full inventory of all the operators included with Fleximage.