0

I'm having an issue with a site where some members are experiencing sideways photos uploading via a Safecracker form.

I've looked into it, and found a solution (using Channel Images to upload, crop and rotate), but the client is reluctant to make the changes required. It seems EXIF data is at fault, i.e. not being stored correctly. But I'm not 100%.

Has anyone else experienced a similar issue? And was there a solution?

2

I managed to get this working. Here's how.

I made a hack for VZ Exif (by Eli Van Zoeren) that reads in orientation data. You can use this with CE Image to accomplish conditional rotation based on the photo's orientation. Click here to download the hack.

  1. Put the hacked plugin in ./system/expressionengine/third_party/vz_exif/pi.vz_exif.php
  2. Install and enable CE Image
  3. Use the below code in your template, replacing {photo} with the relevant field. {exp:vz_exif image="{photo}"} {if orientation == "1"} {exp:ce_img:single src="{photo}"} {if:elseif orientation == "2"} {exp:ce_img:single src="{photo}" flip="h"} {if:elseif orientation == "3"} {exp:ce_img:single src="{photo}" rotate="180"} {if:elseif orientation == "4"} {exp:ce_img:single src="{photo}" flip="v"} {if:elseif orientation == "5"} {exp:ce_img:single src="{photo}" flip="h" rotate="-270"} {if:elseif orientation == "6"} {exp:ce_img:single src="{photo}" rotate="-90"} {if:elseif orientation == "7"} {exp:ce_img:single src="{photo}" flip="h" rotate="-90"} {if:elseif orientation == "8"} {exp:ce_img:single src="{photo}" rotate="-270"} {if:else} {exp:ce_img:single src="{photo}"} {/if} {/exp:vz_exif}

You may want to use some of CE Image's other options too. That's it! The result is a page that handles EXIF orientation better than Google Drive, Dropbox, Github, Imgur, Pinterest, Tumblr, WordPress, and many others.

1

It could be that the photo was shot sideways but the user's OS (normally Windows) has applied some kind of transformation for displaying on the local system. This doesn't actually change the photo, just sets some orientation (probably in the EXIF data) so the OS displays it the "correct" way around.

Because this transformation means nothing in the real world (or EXIF data is stripped/ignored) when they upload it, the photo appears as it was shot.

I don't think there's much you can do about this other than properly transform the photo either on the desktop or on the site (as you suggested to the client).

4
  • That's what I thought. Extremely frustrating as the client doesn't really understand. This hasn't really come up before either, so it's hard to know what to do otherwise. May 23 '13 at 14:37
  • 1
    You may be able to use an EE transformation to respect the EXIF data. However I don't think you can apply this conditionally. The only other option would be to write a plugin that read the EXIF data of the image as it was displayed - but again this assumes the data survives being uploaded. I have a feeling it may not even be in the original image, but simply applied by the OS by some kind of lookup table stored on the user's computer.
    – foamcow
    May 23 '13 at 14:41
  • Like .thumbs_db or whatever it was on Windows? May 23 '13 at 15:15
  • Perhaps. I don't use Windows regularly enough to know where the file is, but the behaviour is something I have observed. Actually I've seen it on my Mac also.
    – foamcow
    May 23 '13 at 15:45
1

You should have a look at what this person has done.

http://ellislab.com/forums/viewthread/227175/#1036442

Even if this doesn't work properly. You can have a checkbox

http://devot-ee.com/add-ons/pt-field-pack

that asks if the image needs to be rotated. If its the case you can modify the plugin to take in the params you need and rotate it via the plugin.

1
  • Very useful thinking there Johnathan, thank you. I'm just waiting for the client to come back to me with what they're happy to do. May 28 '13 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.