Rotate images

[Kristina Hoeppner]

A teacher on MyPortfolio.school.nz said it would be great to be able to rotate images once uploaded to Mahara because when kids upload photos from mobile devices, they may not have the correct orientation.

[Aaron Wells (u-aaronw)]

Setting this one to "Snack-sized". I think it'd be a pretty standalone bit of work, and probably quite achievable since we already require some image processing libraries.

There are two workflows we'd need to support:

1. Rotating an image that's already been uploaded, via the Content -> Files page.

2. Rotating an image as it is being uploaded, i.e. via the Pieforms filepicker element on the Image Block or elsewhere.

It'll be tricky to think of a good interface for #2. We don't want to further complicate the filepicker by adding a pair of great big "rotate?" buttons that will always take up space but only be used 5% of the time. Maybe it would be better to just implement workflow #1...

[Kristina Hoeppner (kris-hoeppner)]

I would go for #1 only. Also, if at some point we decide to add some more options (if needed), we wouldn't overload the file upload. Also, since you can upload files in bulk, it might not be convenient to do the rotating during the upload.

[Aaron Wells (u-aaronw)]

Fair enough. This could go under the individual file editing section. (The same place where you can set tags and comment permissions for an individual file.)

[Aaron Wells (u-aaronw)]

Setting this as a duplicate of bug 1498936, because that one encompasses the idea that if we do add an image manipulation system, it can do additional things beyond just rotating images.

[Aaron Wells (u-aaronw)]

Actually, let's keep this one separate from Bug 1498936. This bug is "snack-sized", only if you add a server-side system for rotating an image 90 degrees.

The Bug 1498936, incorporating a client-side photo manipulation system, is a larger project. Although still fairly self-contained and not enormous in scope.

[Robert Lyon (robertl-9)]

There is some discussion about achieving this in the forums -
https://mahara.org/interaction/forum/topic.php?id=7541&offset=0&limit=10#post31336

Which mentions what is needed to achieve this basic concept
http://stackoverflow.com/questions/11259881/how-to-rotate-image-and-save-the-image

Things we would have to deal with in Mahara:
1) Should the rotated image overwrite the original or be a copy of original?
2) Should we allow rotation of image after it's been added to a page / as attachment to something?
3) What file formats should be allowed to rotate? PHP has inbuilt handling for jpeg / gif / png formats only
4) Clearing any cache / resizing of original image if we rotate it
5) Dealing with a temporary saving of rotated image before saving in case user wants to cancel the rotation.

[Robert Lyon (robertl-9)]

Thinking about this some more we could do the following:

1) Alter the artefact_file_image table and add a column 'orientation' where we record one of the 4 possible values, 0 (the default), 90, 180, 270

2) On saving/choosing image rotation state, eg 90 deg clockwise we could record in the artefact_file_image table 'orientation' column as the preferred orientation of the image

So next time the image is rendered on a page (or wherever) it is shown in that rotation from original either by:

3a) applying the rotation via css or
3b) running image through a php function to generate a new resized image with that orientation before displaying it.

The advantage of this are:
- Will only deal with images in relating to rotation
- Never touch the original so easier to change orientation choice multiple times
- No need to have 'cancelling' as it will be easy to choose any of the 4 possible rotation choices

[Kristina Hoeppner (kris-hoeppner)]

https://reviews.mahara.org/#/c/7587/

[Robert Lyon (robertl-9)]

With current patch 7587 I did notice this:

1) Add first image block to page, select an image in config, edit image in config, save block config - I'd get block with image as expected

2) Add second image block to page, edit image that was used for block one, rotate image 90deg, save image edit part, but not select image as one to use for image block and then save block config - the image in block one does not show rotation applied and block two shows no image selected.

3) If I then edit block two and select the image and then save block two again both blocks now show image correctly rotated

This is because other blocks on page only get updated if block being saved has a choice (so we know which other blocks to update)

Not sure if that will be a problem or not as it is quit the edge-case

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/7587
Committed: https://git.mahara.org/mahara/mahara/commit/353e4105625ebe188ab17c7c207264b972f17e71
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 353e4105625ebe188ab17c7c207264b972f17e71
Author: Robert Lyon <email address hidden>
Date: Fri Dec 23 15:33:22 2016 +1300

Bug 1272122: Add image rotator to the filebrowser edit item form

behatnotneeded

Change-Id: I7fb2fa618719dd12d6b77177a9e1ad127ea175d2
Signed-off-by: Robert Lyon <email address hidden>