We just add a cool new feature to doodlekit' that lets users upload their own header image for their layout. The obvious problem with this is resizing and cropping images is a pain, even if you happen to have photoshop. There's a better way. I knew I could do the cropping with RMagick, but how do I know what to crop? Enter DEfusion's JavaScript Image Cropper UI. This was just perfect, as it uses prototype and scriptaculous, which I'm already using through Rails. Not only that but it supports ratio constraints, which is very important for my purposes.

As for the implementation, it was fairly simple. I just looked at the example they had for fixed ratios, only changed a few things.

My javascript import looks like this...

<%= javascript_include_tag("prototype", "builder", "dragdrop", "cropper", "scriptaculous") %>

I changed the ratioDim line to use the size of the target space as the default dimensions.

ratioDim: { x: <%= @layout.header_width %>, y: <%= @layout.header_height %> },

This way, they can resize the cropping area, but only with respect to the target ratio. I changed the text fields to hidden fields and just slapped a form tag around them that posts to a Rails action that looks like this.

def crop_and_close @settings = @site.settings @layout = @site.layout if params[:x1] img = Magick::Image::read(@settings.header_image_file).first img.crop!(::Magick::CenterGravity, params[:x1].to_i, params[:y1].to_i, params[:width].to_i, params[:height].to_i, true) img.resize!(@layout.header_width, @layout.header_height) img.write @settings.header_image_file end end

I'm already using RMagick, and file_column to upload the image btw. This simply uses RMagick to crop the file, and then resizes it to the target size for the layout.

This was so super easy, and so far it works in FF, IE, and Opera! If you're looking to do something like this, I highly recommend this Javascript cropping UI.

About the Author

Ben is a seasoned web development professional and co-founder of doodlebit LLC, a web solutions company.

doodlekit online website builder - http://doodlekit.com doodlebit web solutions - http://doodlebit.com Garbage Burrito Web Development Blog - http://garbageburrito.com