SimpleCrop

Easy rails implementation for Jcrop that lets you arbitrarily crop paperclip images.

This gem is very young and under development, so take a look at the source code before usage.

There are other implementations of Jcrop for rails, which served as a source of inspiration to this gem. Take a look at:

Installation

Install the gem:

gem install simple_crop

Add it to your Gemfile and run the generator:

rails generate simple_crop:install

Basic Usage

Now create a model with a paperclip attachment defined, simple_crop defined as processor and call the simple_crop method.

class Image < ActiveRecord::Base
  has_attached_file :image, :processors => "simple_crop"
  simple_crop
end

Ensure you load these javascripts in your view.

<%= javascript_include_tag 'jquery.Jcrop.min.js' %>
<%= javascript_include_tag 'simple_crop.js' %>
<%= stylesheet_link_tag 'jquery.Jcrop.css' %>

Call simple_crop on a paperclip attachment in your edit action’s view (won’t work on a new object, as no image is there to crop yet). For example:

<%= form_for @image do |f| %>
  <%= f.simple_crop :image %>
  <%= f.submit :submit %>
<% end %>

Advanced Usage

Let’s assume your model setup is like this:

class Image < ActiveRecord::Base

has_attached_file :image,
  :styles => {
    :small => "170x100#",
    :medium => "600x500>",
    :original => "950x800>" },
  :processors => "simple_crop"
simple_crop

end

The default crop occurs on the original style of your image. If you want to let users select on a certain style and crop another style, just do:

<%= f.simple_crop :image, {:crop => :small, :select => :medium} %>

If the :crop and :select parameters aren’t the same, it will add a preview panel next to your crop image.

The simple crop form helper also outputs some javascript for initialization. If you want to manually fire it instead, use this:

<%= f.simple_crop :image, {:script => false} %>

You can make the helper output the jQuery plugin initialization to any yield section in your layouts too:

<%= f.simple_crop :image, {:script => :js_bottom} %>

TODO

See TODO document.

Copyright © 2010 Marian André. Bitflut Media.