Resource photo orientation all landscape

[clash99]

Steps to reproduce the error

Upload a resource with a portrait layout.

Actual behavior

In platform, all resource photos seem to have landscape layout.

Expected behavior

I would expect photo orientation in platform to be the same as uploaded resource.

[ian-ross]

@clash99 Can you give an example of what you mean here? I don't really see this: thumbnails for image resources are clipped to square (so portrait/landscape is irrelevant), and when you download image resources you get back the same image you uploaded.

[clash99]

I wish I would have attached screenshots so I would remember the details. I think this was directly related to an exercise in Frankfort. @dpalomino Do you remember any of the details on this one? I think Noel tried to take photos and upload them and they were flipped. Is that correct?

[wonderchook]

Here is a picture where when you upload it then it is rotated.

Hmmm actually never mind github rotates it as well. Though when I open it on my computer it is faces the correct way.

[ian-ross]

The EXIF metadata for that image says that its width is 5312 and its height is 2988, i.e. it's a landscape image.

[ian-ross]

But then it also has an orientation tag. Not sure how to interpret that.

[ian-ross]

OK, so it looks like the EXIF orientation tag is being ignored. It's a little weird, but from what I can figure from the EXIF standard (http://www.cipa.jp/std/documents/e/DC-008-2012_E.pdf), the settings for that can make "rows" in the image data actually be columns and "columns" rows. Confusing. I'll look into what people normally do about this, but I guess the options are either to keep the images as they are and figure out some way to take account of the EXIF orientation information when displaying them, or to normalise the images when they're uploaded so that rows and columns in the image data really are rows and columns in the "real image".

[clash99]

[ian-ross]

Can you attach the JPEG image itself so I can look at its metadata?

[clash99]

[ian-ross]

So that one's the same: from the image dimensions it looks like a landscape image, but it has an EXIF orientation tag that says it should be rotated into portrait orientation. I guess most phone cameras give a fixed number of "rows" and "columns" irrespective of the image orientation, and just change the EXIF orientation tag to indicate which way round the camera was being held.

And as you can see from the way GitHub handles the images, we're not alone in ignoring the orientation tags.

[ian-ross]

Hmmm. There's possibly a simple CSS fix for this: https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation But browser support is pretty non-existent: http://caniuse.com/#search=image-orientation

[ian-ross]

Best solution seems to be some JS in the browser to read the EXIF metadata and rotate the images appropriately. That seems like a better idea than messing with the images as uploaded. I've seen a couple of examples floating around. I'll adapt one for our case.

[ian-ross]

Ha. This turns out to be a different problem to what I thought. It's just a matter of making sure that the orientation information is taken into account when image thumbnails are created: the incorrectly rotated images you're seeing are all thumbnails. In any case, I'll fix it. Should be easier than the live in-browser rotation.