Submitted by Jordan on
I'm building a Drupal app that lets you upload photos from your mobile device directly to the site. The problem: half of them are coming out sideways, or even upside down.
What's Going On
Until just a few years ago, it was impossible to even upload photos from iOS. Then it became possible, but there were dark whispers that iOS was stripping out metadata. Longwinded diatribes about how Apple wants to "protect" us by crippling our electronic devices. It's true, but that's not the problem here. After some research, I discovered that Android devices were doing the exact same thing: I could upload a photo using my mobile device, but it might be upside down or sideways.
Side note: Most modern cameras, including smartphones, attach additional information to a photograph. One piece of information is "orientation." So if you hold your phone sideways when you take the shot, the image is labeled as a "sideways" image. Any smart program that can display your photo should read that data and display the image with the correct orientation. This information is known as EXIF data.
After more research, I discovered that the EXIF data not only being uploaded, but Drupal was saving it too. So why did my photos appear sideways?
Imagecache.
Until D7, Imagecache was an add-on module to help you handle images. It would automatically render thumbnails, midsize images, etc. for any image you uploaded. This made it super easy to create custom galleries, for instance. Starting with D7, this was baked into core.
The Problem
The problem: imagecache ignores EXIF data. In other words, imagecache doesn't care if your photo is supposed to be displayed sideways or upside down. It will always show the same orientation, so sometimes your photos will be rendered sideways or upside down.
The Solution
You no longer need to install imagecache since it's now baked into core. But you still need to install an add-on module called imagecache actions. This module is advertised as an "artsy fartsy" module that does useless things like add an old fashioned photograph border or a stamp to make it look like your airplane is from 1940.
It will also read EXIF data.
Unfortunately, this feature is not documented. In fact, documentation is poor for the entire module. I was ready to skip over the entire thing and look at some custom solution to detect and rotate photos, but luckily my coworker caught it.
Even better: you don't need to create new image styles. Just add "autorotate" to your existing image styles and they will display correctly: thumbnail, midsize, etc.
My coworker and I spent hours on this and I'm amazed that no one has blogged about it before. So, here you go, weary Internet Traveler. For you, at least this once, your search is over.
(It's 6 pm on a Friday. Why am I still here?)