Coder Social home page Coder Social logo

rails_admin_jcrop's Introduction

RailsAdmin Jcrop Plugin

Image cropping made easy!

  1. Add it to your Gemfile and run bundle install:

     gem 'rails_admin'
     # Because rails_admin_jcrop autoload modules by checking plugins you use, it's
     # recommended to require it explictly before rails_admin_jcrop
     # e.g. if you use carrierwave
     # gem 'carrierwave', :require => 'carrierwave'
     gem 'rails_admin_jcrop' #, git: 'git://github.com/janx/rails_admin_jcrop.git'
    
  2. Configure your model field to use Jcrop:

     # RAILS_ROOT/config/initializers/rails_admin.rb
     config.model User do
       configure :avatar, :jcrop
    
       # Below is optional
       edit do
         field :avatar do
           jcrop_options aspectRatio: 500.0/320.0
         end
       end
     end
    
  3. If you use Paperclip, you need to do nothing here, rails_admin_jcrop will append RailsAdminJcropper processor to your attachment automatically. If CarrierWave is used, please invoke :rails_admin_crop in your uploader:

     class AvatarUploader < CarrierWave::Uploader::Base
    
       version :thumb do
         process :rails_admin_crop
         process :resize_to_fill: [500,320]
       end
    
     end
    
  4. Done! Click the image on your RailsAdmin model edit page and enjoy cropping! Cropping Screenshot

Field Options

jcrop_options

You can pass any Jcrop plugin allowed options here, for example, use aspectRatio to fix the ratio of selection box:

        field :avatar do
          jcrop_options aspectRatio: 500.0/320.0
        end

Please check Jcrop document for more available options.

fit_image

By default, image is scaled properly to make cropping more easy, but sometimes the image is still too large to fit in the modal window, you may need to scroll image up/down to crop. If you set fit_image to true, image will always be resized to fit in modal window.

        field :avatar do
          fit_image true
        end

Check screenshots below to see the difference:

When fit_image is false (default)

fit_image false

When fit_image is true

fit_image true

Localization

Localize the crop form by adding these entries:

    zh:
      admin:
        actions:
          crop:
            title: '剪裁'
            menu: '剪裁'

Dependencies

  • MRI 1.9.3 (All above 1.8.6 should work, I only tested on 1.9.3)
  • Rails 3.x
  • MiniMagick

Supported ORM

  • ActiveRecord
  • Mongoid

Supported Asset Plugin

  • CarrierWave
  • Paperclip

TODO

  • make sure rails_admin_jcrop load after paperclip/carrierwave load
  • automate :rails_admin_crop for CarrierWave uploader

Contributing

Any help is encouraged. Here are some ways you can contribute:

  • by using it
  • by telling people
  • by reporting bugs or suggesting new features on github issue tracker
  • by fixing bugs or implementing features

Thanks

Contributors

And ...

Life is easier with you.

rails_admin_jcrop's People

Watchers

Christian Hochfilzer avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.