Image Editing: Ability to rotate images

[krissy]

What

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

How

• Implement rotation 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 (inline buttons vs modal?)

Considerations

Liase with team on Slack re UI

[rocioleon]

The solution is based on the research about Ephox TextBoox.io and Wix.com edit image features. There are attached a wireframe to be reviewed.

https://www.ephox.com/blog/from-the-ux-desk-road-testing-inline-image-editing/

[rocioleon]

Here is a link to see the TextBox.io documentation in case this is helpful
http://docs.ephox.com/display/tbio/Getting+Started

[rocioleon]

After feedback, here is the amended wireframe for desktop. The idea is after having selected the file, the user can click on the thumbnail to open the edit popup module to rotate, and crop(rotate or the image. Then apply changes or cancel to close the popup.

[rocioleon]

This is the version for the phone device

[rocioleon]

Any feedback or question...

[marizoldi]

What if we placed the crop/rotate/ok functions in a small rounded menu that is an overlay onthe image (currently I put it on the right side). The cancel function can be just clicking outside the overlay box. I have made an example below.

I have used Material icons which are free and super helpful for dev too: https://design.google.com/icons

They inlcude this rotate and crop function which I think is useful to add to the menu ..

[rocioleon]

Thanks! Let's talk about it.

[CathMollie]

Both of these ideas are good. We could A/B test them maybe - with our existing piloters in Serbia or with our EH community?
@rocioleon what do you think?

[tanyapowell]

@rocioleon for the mobile version, would a user still have to double click on an image to get the image editing options to appear in the overlay?
Also, is it worth having a button so there is a clear CTA instead of having a label saying (Double click on image to edit)? So that it's really really obvious that option is available?

[krissy]

@CathMollie @rocioleon @EChesters @tanyapowell @marizoldi Who owns the UX decisions for this ticket and #89? Now we're moving towards HDX dataset integration we need to prioritise the quality of our data, so ability to rotate (then crop secondary) could now become a priority, at least for Super Admins to start for post-editing. Should we resume convo?

[CathMollie]

Cath comments on Slack, 16 March:

• Consolidate Image Editing: Ability to rotate images #88 and Image Editing: Ability to crop images #89 into one ticket (this one)
• UX Team to approve @marizoldi's suggestion of using Material icons (which are OS)
• Separate exploratory dev work into its own ticket
  @rocioleon to review and comment by 19 March

[rocioleon]

Working on this week as wireframe needs to be amend + Google Material design suggested by @marizoldi + Upload New Drawing Form design by @EChesters
Then,
-#89 will be updated accordingly @EChesters