Picture is upside down when coming from WP iOS

[snoop_adv]

Hello,

Small but annoying issue since a few releases:

Fundamentally, you can take horizontal pictures with your iPhone with volume buttons up or down as the camera lens is in the corner of the device. Pictures in Photos look perfectly fine... and when you select it within WordPress (latest version), it looks fine too. Now, when you upload the post, on the website, picture appear upside down:-(

Look like, somewhere in the process, data attached to the picture is not interpreted correctly. Only way to fix this:

1. Take all horizontal pictures with the volume buttons down
2. Go to the WP admin on the website and access media in order to make a 180 degrees rotation to every picture

At this point, don't know if that is a iOS bug or WP server bug as my account gets automatically replicated to Tumblr and there, picture appears perfect... there must be a but into WP server.

Would be nice to fix this...

Thanks,

S

[TJNowell]

This sounds like it has something to do with the orientation values of the image, the image you've taken is upside down, but the photos app is rotating it on the fly accordingly to match the metadata

[SergeyBiryukov]

Replying to TJNowell:

This sounds like it has something to do with the orientation values of the image, the image you've taken is upside down, but the photos app is rotating it on the fly accordingly to match the metadata

Correct. I saw a similar topic on support forums a few days ago, and that was the case.

Replying to snoop_adv:

Now, when you upload the post, on the website, picture appear upside down:-(

Could you provide a sample image?

[snoop_adv]

Thanks for the quick reply.

Here comes a test I have just done. Picture was taken horizontally with volume buttons up:

​http://snoop-adventures.com/?p=4161

WP displays it upside down but as you can see on the Tumblr account:

​http://snoop-adventures.tumblr.com/post/90243110778/debugging-wp

Image is perfectly displayed.

This bug was introduced 1 or 2 versions ago.

T

[SergeyBiryukov]

I've checked the image in IrfanView, and it's displayed upside down there (as well as here on Trac). Per Exif info, the orientation is "bottom right".

Perhaps we could look into reading the Exif data and rotating the image accordingly:
​http://stackoverflow.com/questions/7489742/php-read-exif-data-and-adjust-orientation

[SergeyBiryukov]

Related: #28916

[felipou]

I also believe the correct treatment is to detect the 'Orientation' metadata and rotate the image accordingly.

I stumbled upon this issue recently when programming an app for Mac OS.

I really don't know why they use such a complicated way to rotate images. It's also how my Canon camera handles rotation.

I found some documentation about what each orientation value means in the following sites:

​http://www.impulseadventure.com/photo/exif-orientation.html

(look for 'kCGImagePropertyOrientation' here)
​https://developer.apple.com/library/mac/documentation/graphicsimaging/reference/CGImageProperties_Reference/Reference/reference.html

I also found these two plugins that handle this for Wordpress (the first one didn't work for me on version 3.9.2):

​https://wordpress.org/plugins/image-rotation-fixer/

​https://wordpress.org/plugins/image-rotation-repair/

Hope this helps! :)

[ephany]

I haven't been blogging for a while and just noticed this problem a few weeks ago, but as I was trying to upload some vacation photos this weekend, it went from mildly irritating to a major roadblock.

The support forum posts I've seen on this are either marked resolved or closed without anyone actually providing a solution.

Examples:

​https://wordpress.org/support/topic/image-rotation-issues-and-incorrect-mobile-browser-display

​https://wordpress.org/support/topic/uploaded-photos-not-being-automatically-rotated-according-to-exif-data?replies=12

This isn't just an iOS problem since people commenting in those posts mention using Android phones as well as Pentax, Nikon Coolpix and Canon Powershot.

Some people suggested using image editing software to fix the image orientation before uploading. However my images were already correctly oriented viewed in Lightroom, Finder and Preview.

When I uploaded some photos, they appeared upside down on desktop machines, but fine some mobile devices. When I used the WP media editor to rotate the images, the display reversed: correct on desktop, flipped on mobile.

I asked via Twitter for a few other people to report what they were seeing. ​Here are the responses

Until this is resolved, I added the ​image rotation fixer noted above.

[helen]

Duplicate of #14459.