Support » Fixing WordPress » Image rotation issues and incorrect mobile browser display

  • This is just confusing and bizarre.

    So, here is an example post: http://www.ruledbypaws.ca/2013/07/canada-day/

    The image attached to that post (of the lady and the guide dog) was uploaded in Safari and was rotated 90 degrees counter-clockwise. (Link.) She edited the image in WordPress to orient it properly and when viewing her site in various desktop browsers that is how it loads. (I’ve checked in Safari and Firefox on OS X and Firefox and Chrome on Windows 7.)

    However, when you view her site on a mobile platform (e.g., iPad, iPhone) the edited image displayed is flipped 180 degrees from the original uploaded image. And even more confusing, the original image displays correctly as a vertical image, 90 degrees clockwise from how it looks on a computer.

    I’m totally baffled by this. I can’t quite recreate the issue on my own site, though, I do notice inconsistencies with how images load on mobile browsers as opposed to a computer; for example the third image in this post. (I should note, that prior to uploading I usually fix the rotation of images in Photoshop and it would seem SOME of the time WordPress rotates them back.)

Viewing 15 replies - 1 through 15 (of 16 total)
  • Hi, can’t make out your issue just yet – what’s going on? Sounds like you’ve rotated an image in the admin section and you’re not seeing the changes…?

    Were these photos taken with an iPhone?

    No, I’m not having issues with editing. The images were edited to rotate them properly, though I suspect they were properly oriented BEFORE being uploaded which from searching the forums may be a strange plugin/browser issue with the Add Media panel. (Sounds like a bug to me, but that’s not really the point.)

    No, the photos were not taken with an iPhone. The one linked on the ruledbypaws.ca site was taken with a Nikon Coolpix P7000 and the photo I reference on my site was taken with a Canon Powershot G9.

    My issue is that when using a mobile browser those edited images display differently. And in the case of ruledbypaws.ca – the original image itself displays differently as opposed to viewing them via a computer.

    Once the image has been rotated it can’t change – an image is an image. I can think of two possibilities;

    – Clear your cache(s) on your devices and you may be seeing an “older” image
    – There is some CSS transform that’s rotating images, although I think it’s unlikely. I work with tablet and phones a lot, and I’ve not seen this issue, you have to deliberately rotate an image.

    Some screenshot may help someone on the forum know a little more about what’s going on.

    Dan

    Once the image has been rotated it can’t change – an image is an image.

    Yes, I know that. Thus my confusion.

    I could understand the caching being an issue, as I am sure that’s the issue for why I see the non-rotated images on my own site. But in that case I’d expect to see the image rotated 90 degress counter-clockwise from vertical on ruledbypaws.ca. However, what I see on my iPhone, my iPad, and her husband sees on his iPhone is the image rotated a complete 180 from the original image. How was that cached?

    Screenshot from my iPad, for reference: http://guidingdolly.com/p/IMG_0027.jpg

    I’ve looked in the admin panel at the image I’m referencing and how it is inserted into the post and all does seem correct there, which is why I posted because I truly don’t understand what is going on.

    This may be relevant –

    http://stackoverflow.com/questions/10600613/ios-image-orientation-has-strange-behavior

    Hmm, fascinating.

    So, essentially, there’s nothing that really can be done if this is the cause?

    This appears to be what is now happening to me!

    I am running the latest version of iOS7 and WordPress. Uploading images directly from my iPhone 5s to the site and placing them in a post. They show with the correct orientation when subsequently viewing the post on an iOS device (iPhone, iPad), but rotated 90 degrees on any computer (OS X or Win7). If I take the same image, rotate it in OS X, delete it off WordPress and re-upload, it shows up correct in OS X and Win7 but now wrong on iOS 7!

    Anyone have any further luck with this?

    Get them fixed on your local computer before uploading to your site. This isn’t a WordPress issue – see:

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

    @shaneburger – I’ve found the only way to consistently see images with proper orientation on all devices is to edit the photo before uploading to WP in an image editing program like Photoshop. However,I have also been able to just use the preview feature on either Windows or Mac to rotate/reset the image and have it upload properly.

    Unfortunately, as it’s an iOS thing (as noted above) and not a WP thing so there’s no solution within WP.

    I am having trouble understanding why it is not a WordPress issue. Does WordPress not interpret EXIF data on uploaded images?

    @wpyogi linked this article above that explains the issue.

    I read that article, but that article suggests to me that the solution is for WordPress to start reading EXIF info.

    From a workflow perspective, by not having WordPress reading EXIF info, you are suggesting to all WordPress users that they must use an external photo editing program every time they want to post an image to WordPress. Whereas, by using EXIF info, posting to WordPress can happen directly from the mobile device or via computer without needing to process the image in an additional step.

    I’m having the same issue. It’s not just IOS, it’s Android too.
    In my case it’s uploaded images from the public that are submitting to a site.

    It is a WordPress Issue.
    Just wondering if there’s a fix…?

    I am having the same problem. I orient the photos correctly and save them on my phone or an editing app on my computer before uploading, and they still turn when viewed from a mobile or when uploaded to facebook.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Image rotation issues and incorrect mobile browser display’ is closed to new replies.