Avoiding rotated image frustrations in Drupal
Each of our dog walkers have a walker page with a high quality picture of the walker, usually with a dog or two. We use the ‘imagefield_crop’ module widget to make it easy to crop the picture to appropriate size.
Some of the walkers complained that the upload didn’t work properly, or that the process was frustrating. The pictures came out rotated 90 degrees or upside down.
Our initial thought was that the walkers were uploading rotated images and were expecting us to provide a ‘rotate’ option. Walkers are not necessarily keen to open Photoshop or similar and start rotating the pictures before upload.
I started looking for modules or some library that would provide this functionality, i.e. add a ‘rotate’ button to the upload form. I couldn’t find any, but while googling I found out what the real problem is. Turns out that JPEG images include metadata about the orientation of the image. Most programs are aware of the metadata, read the orientation information and present the picture accordingly. So, assume you take a picture on your mobile phone, and view it on your Mac. The mobile phone would mark that the picture is rotated by 90 degrees, and both galleries on the mobile and on the Mac would show the picture correctly as both rotate it automatically before viewing.
But once you upload such a rotated picture to the site, the image will appear rotated, as browsers render images without taking into account their attached metadata.
So the frustration is even bigger than we initially thought. The walker uploads a seemingly non-rotated picture from her desktop, and the stupid site rotates it just because it can!
The orientation data is part of the EXIF standard. Fortunately, Drupal already has a module to fix this. I used ‘exif_orientation’ module, which automatically rotates images upon upload. It works like a charm after updating the call on line 100 to image_rotate($file_image, $degrees, 0xFFFFFF) as explained in one of the open issues.
There is another module that looks promising that offers the same auto rotation fix, ‘image_exif_autorotate’. I haven’t tried it, but I believe it does the job too.
There is a Github project with a set of images in all the various possible orientations that EXIF can describe. Pure rotations (which is what the module can handle) are those images which end with either underscore 3, 6 or 8. It is all explained in detail here. Other explanations about the EXIF standard that I found useful are here and here.