I’ve seen and ignored a thing with photos from my mobile phone for years. Since I’m in the minority that views the web on a device other than a smart phone, maybe it’s not a big deal.
It’s when the photos look as you took them on your phone, but when uploaded to a site like WordPress or used in other desktop software, the ones taken in portrait mode (vertical oriented ones)… are sideways. I’ve seen it numerous time, but usually shrug and just rotate the images as needed, and repeat the upload.
But Colin Madland caught my attention with an issue entered on the SPLOT image collector (I may want to blog about how someone actually submitted an issue, my repos are so so so quiet):
Ran a little test at pics.madland.ca and noticed that images uploaded from iphone in portrait orientation are rotated 90 degrees and displayed in landscape. Can’t see any settings in the dashboard related to this. not sure where to look in the theme files.
And with some web searching, stack exchange exploring, I finally learned what it’s all about. I think. Technically, all photos taken on your mobile device are stories as landscape orientation (long side wide). When you rotate your phone 90 degrees to portrait (up and down) mode, the image is still stored landscape mode, but the device adds meta data (or EXIF) to the image that records the rotation amount. Mobile devices and some software are capable of doing the correct orientation on the fly on device.
The best resource I found was Are Your WordPress Photos Sideways? Here’s How to Fix It from photowebo. While I did come across some code ways I might have rolled into my theme, this is one of them that seems better suited to letting a plugin do the work, so I tried iOS images fixer:
By default, thumbnails of photos taken by an iOS device (iPhone or iPad) are flipped 90 degrees to the left, it’s a long image EXIF information story. This plugin takes care of this and fixes the uploaded images orientation’s (if needed, based on EXIF data) using ImageMagic Library if available or PHP GD as a fallback.
I ran some tests on the demo version of the theme I keep running on http://splot.ca/collector/ (nostalgically, the first instance of this theme was installed here in 2014).
Before installing the plugin, I took two photos of Felix in landscape and portrait mode. Sure enough the portrait mode one came in sideways. Then I installed and activated iOS images fixer, and uploaded a new portrait mode image — it arrived in the correct orientation.
The image on left was taken in portrait mode on an iPhone, uploaded directly tot his site. The iOS Image Fixer plugin automatically rotated it.
See the before plugin and after plugin portrait orientation photos uploaded from my iPhone.
This is an 8 year old ticket reported in WordPress, so no breath holding on it being rolled into the core version.
My recommendation now listed in the theme’s ReadMe is to use the plugin. It will correctly orient all photos newly uploaded but also has a feature to fix previously uploaded ones.
Thanks Colin for nudging me to fix this. This is how open works!
Open Sideways flickr photo by cogdogblog shared under a Creative Commons (BY) license
Featured Image:
2016/366/38 She’s Sideways flickr photo by cogdogblog shared under a Creative Commons (BY) license
Did you have to regenerate the thumbnails subsequently?
I struggled with this for a while a couple years ago and got mad and left it.
I would not be surprised if thumbnails would need a regeneration. I actually did not try the running the iOS Image Fixer on the media library as I wanted to leave the unrotated ones as us for an example.
But I get the getting made, I just wish rotated pictures were saved as originals. Damn kids and their phones
Hi, I have some code on Ansel’s site that reads the exif and then uses GD to rotate the image.
I could share if handy – you could hook into the image upload actions in functions.php
I forgot to subscribe….
Thanks, I’d be keen to see. I think it would be better to roll into the code.