Feature #28616

Handle image orientation of attachments and thumbnails

Added by Gregor Schmidt 7 months ago. Updated 5 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:Attachments
Target version:4.0.0
Resolution:

Description

From time to time, images may have a different orientation than their byte stream suggests. E.g. this apparently happens when taking a picture with an iPhone. The proper orientation is then stored in the exif data. The image data (technical orientation) combined with the exif data will result in a properly oriented image (natural orientation).

Currently Redmine does not handle this. Instead, images will always be displayed in their technical orientation. But there are some things we can do to improve the situation.

Browser support

When including images into a textile-enabled text, the browser might or might not use the exif data to rotate/flip the image.

  • Mobile Safari will show the image in natural orientation automatically
  • Firefox will show the image in natural orientation if the CSS Property image-orientation: from-image; is used
  • Chrome and Mobile Chrome will show the image in natural orientation only, if it's displaying the image directly, not when embedded into an HTML page.
  • IE seems to act similar to Chrome, but I don't have a machine to test that at the moment.

When displaying thumbnails, the images will always be shown in their technical orientation, since the thumbnailing will remove the relevant exif data without changing the orientation.

Proposed change

The attached patch will add the CSS property, so that Firefox will display images in their natural orientation. Furthermore it changes the thumbnailing, so that imagemagick's convert will read the exif orientation and rotate/flip the image before thumbnailing. This way, the thumbnails will also be show in their natural orientation.

Fixing the orientation in Chrome/IE and Desktop Safari seems to involve reading the exif data within the browser and applying transformation via CSS or Canvas. This seemed to be too much code for this kind of feature, so I did not follow this approach.

The attached patch was created against r17305.

How to reproduce

To test this feature, I've used the example images by Matt Galloway. (c) CC BY NC ND Matt Galloway - 2012

and a wiki page with the following content:

!{height: 100px}down-mirrored.jpg! !{height: 100px}down.jpg! !{height: 100px}left-mirrored.jpg! !{height: 100px}left.jpg!

!{height: 100px}right-mirrored.jpg! !{height: 100px}right.jpg! !{height: 100px}up-mirrored.jpg! !{height: 100px}up.jpg!

Screenshots

Before:

Sceenshot - Before applying the change

After the changes:

in Firefox:

Sceenshot - After applying the change in Firefox

and in Chrome/Desktop Safari/IE:

Sceenshot - After applying the change in Safari

before.png - Sceenshot - Before applying the change (129 KB) Gregor Schmidt, 2018-04-24 11:45

after_ff.png - Sceenshot - After applying the change in Firefox (118 KB) Gregor Schmidt, 2018-04-24 11:45

after_chrome.png - Sceenshot - After applying the change in Safari (103 KB) Gregor Schmidt, 2018-04-24 11:46

EXIF_Orientation_Samples.zip - (c) CC BY NC ND Matt Galloway - 2012 (62.6 KB) Gregor Schmidt, 2018-04-24 11:46

0001-Show-images-and-thumbnails-in-their-natural-orientat.patch Magnifier (1.38 KB) Gregor Schmidt, 2018-04-24 11:50

Associated revisions

Revision 17420
Added by Go MAEDA 5 months ago

Show images and thumbnails in their natural orientation (#28616).

Patch by Gregor Schmidt.

History

#1 Updated by Go MAEDA 7 months ago

  • Target version set to 4.1.0

While testing this patch, I noticed that many image manipulating software supports Exif orientation and seeing improperly oriented images without using Redmine was difficult for me.

I think this small patch is very useful and also Redmine should support Exif orientation. I suggest delivering this feature in the next release.

#2 Updated by Go MAEDA 5 months ago

According to Mozilla, the image-orientation property will be deprecated. Does anyone know the details about the current status of the property?

image-orientation - CSS: Cascading Style Sheets | MDN

Warning: This property is likely to be deprecated in the near future, with its functionality moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image.

#3 Updated by Gregor Schmidt 5 months ago

Thank you for review the proposed patch and for providing feedback.

You're right. I was also thinking about this particular warning on the MDN page before proposing this patch.

Quoting from the MDN page, linked above:

This property is likely to be deprecated in the near future, with its functionality moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image.

The deprecation warning, explicitly excludes from-image. This could either mean (a) that they are not planning to deprecate from-image, or (b) that they do not expect to create replacements for this particular feature and that it will die eventually.

For (a) we're on the right track, for (b) we're doomed anyway, so we can use it as long as possible.

There's only one viable alternative, i.e. using JS to read the image binary stream, interpret the orientation flag and rotate the image using css transforms or canvas. But this would need a lot more code and be more complex.

Instead the proposed solution will fix the problem for the time being for one third of all desktop users (wild guess at Firefox' market share), with nearly no cost maintenance costs or downsides for other users.

#4 Updated by Go MAEDA 5 months ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Target version changed from 4.1.0 to 4.0.0

Committed. Thank you for sharing the patch.

Also available in: Atom PDF