Skip to main content

Fixing rotated images uploaded to Drupal from an iPhone

Published on

iPhones 4 and up store images in landscape mode and use EXIF data to provide proper rotation when viewed. This is a bit quirky as not all desktop browsers provide fixes, or they may not be streamlined. I remember my old project manager telling me their images were showing up "flipped to the side" during mobile QA testing. Sure enough when the image was embedded in HTML it was cocked to the side - however when viewed directly in the browser or desktop it was fine. What? Luckily through some Google-fu I stumbled upon this great blog post detailing how "EXIF Orientation Handling Is a Ghetto." True words.

I am guessing you landed here from a Google search and want to solve this problem. You are in luck - check out the EXIF Rotation project. Originally it spawned as a patch for File Entity, but Dave Reid suggested its better as a standalone module so all files can be fixed - not just sites using File Entity. Typically Drupal takes a "manipulate on render" approach. This module does not. The image will be manipulated on upload to the proper rotation. Here is the reason: what if you want to display the original file and not a derivative? That is going to be embedded in an image tag and probably not render right. Secondly one would have to make sure every single image style added this filter. There is enough button clicking when setting up a Drupal site.

If you wold like to give it a test, checkout out these example files repository from the aforementioned blog: https://github.com/recurser/exif-orientation-examples.

I also would like to note that ImageCache Actions provides this functionality, but as a submodule and as an image filter. I wish I could remember who pointed this out, but it was discovered a few months after the project. But, again, with my previous arguments a filter does not cut it.

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️

#