如何在红宝石上修剪和定位照片？

Question

So on users profiles I will have banner space where they can upload a photo to. I want the space inside the banner to be filled with the photo. Not every user will be good with creating banners in photoshop etc so I'd like to give them some control on how their photo will look in the banner by allowing them to resize it proportionally and position it left, right, up or down until the photo is showing the way they want it to in the banner.

I'd like some limits however in order to stop users from uploading very small photos that won't look good inside the banner. I've checked out google+ which seems to allow this so a perfect example of what I'm looking to do is what facebook do with their timeline banner photo upload option.

I currently use carrierwave for all photo processing in my app.

Any advice/solutions to get me started will be much appreciated.

Kind regards

Answer 1

You will need some kind of client editor for the banner. I mostly used the Jquery UI Plugin ( JqueryUI ), which helps you with some nice methods. You can easily add some draggable, resize or position functionality.

After the user finished the banner, you can upload the whole banner to the backend. For the storage and configuration of photos in rails, I recommend to use the gem 'paperclip' ( Paperclip ). You can set a minimum or maximum size in paperclip when pictures are uploaded.