Image Editing: Ability to crop images

[krissy]

What

Allow the user to rotate images on upload/edit and add interaction buttons

How

• Implement image crop functionality with our existing file management gem Paperclip - We can add some rough link/s to trigger the rotation on the frontend so you're not blocked by UI decisions
• Design and implement an Image Editing UI (modal?)

Considerations

This has a dependency on #88 completion / could be carried out as part of that work. Liase on slack re UI.

Some helpful articles to guide us:

• http://mfischer.com/wordpress/2009/02/02/multiple-image-upload-and-crop-with-rails/

TODO

• Competitor analysis & review
• Hi-Fi mockup
• Crop icon ( @rocioleon is this something that you would like to pick up?)
• "Hover" versions to show these are clickable

(It would be good for devs to add to this, listing what they need from the UX-ers. Especially from a mockup, any sizes, colours in hex or padding/margin dimensions etc.)

[EChesters]

Tomorrow I'll take a look at doing some competitor reviews. I'll see what other image editing tools look like and then see which we consider best. There's a free competitor review template on Xtensio tools, I'll use that, but put it in a word document and upload to our Google Drive for others to review.

Happy to assign myself to this, but if anyone thinks of any other UX things we can do for this - feel free to add yourselves on too!

[EChesters]

Wireframe uploaded for review here. Idea based on a few image upload with edit features. The idea is to have the icons for the other editing tools to be vertical alongside the image.

DESKTOP

MOBILE

There must be an icon and text for accessibility purposes
Icon is 25px x 25px [DESKTOP] and 50px x 50px [MOBILE] at least
We'll need to find a free to use icon or create our own

[tanyapowell]

@EChesters have you spoken with @rocioleon about this issue? I'm seeing some wireframe crossover between this issue and #88