Continuing Image rotation issue

I am having continued issues with images being rotated when uploaded. I've read all the posts here but am still stumped.

I've built a grav/snipcart shop for vintage items and the client wants to just upload her photos with no preparation. So I've enabled the 'resize on upload' and I've set 'Fix orientation automatically' to true in 'config/system/yaml'.

But I'm still getting some images uploading upside down or rotated by 90deg.

The theme is one I built myself but it's very simple - the only image manipulation it does is some 'cropZoom' ing.

What else could I check/change?

@dan-james, When I was a photography enthusiast I noticed a similar behaviour when rotating images using some tool (e.g. Windows Explorer) and the rotation not showing up in another tool (e.g. Photoshop).

Some software rotate the bits in the image and other software sets the orientation in Exif.

Did a search and the following article was the first to popup: Why Your Photos Don’t Always Appear Correctly Rotated.

Thanks - it certainly throws light on the issue - but doesn't solve my problem. The client has an Olympus and they're taking the photos this week - and I'm still getting inconsistent results. I've just put fixOrientation tags back on the twig gallery but it doesn't solve it. I'm stumped.

@dan-james, OK, if all is modern, we might have to look elsewhere.

Is it always the same set of images that show the issue, or is there no pattern?

Can we somehow get access to photos prior to uploading to Grav? So we can reproduce the steps and see if we can reproduce?

Hi, sorry for the long delay between answers. Here's a link to an image that rotates - it's a dropbox link to an 8.9Mb file with a horrible name - but that's how they want to be able to upload them - straight from the camera.

https://www.dropbox.com/s/31qijg0s3fp99gj/2020-07-02%2011.42.12.jpg?dl=0

Here's the EXIF data from Affinity Photo

And here's a screen shot of the page - the second image in the thumbnails is one that I saved in Affinity Photo. When I open it in affinity, the image is the right way round, so I literally just save it ... but the clients don't want to do ANY image processing...

Thanks for any help.

The code for the images has fixOrientation added - but I've tried it without too.

<div class="item__image"> <img id="myZoom" class = "cloudzoom item__image--img" src = "{{ firstimage.fixOrientation.resize(550,550).url }}" data-cloudzoom = "zoomImage: '{{ firstimage.fixOrientation.resize(1500,1500).url }}', zoomPosition: 'inside', zoomOffsetX: 0" data-fancybox="CloudZoom" /> </div>

@dan-james,

Downloaded the image from Dropbox and opened it with Gimp. Gimp shows me a popup about the orientation:
.

I added the original image to a page using ![Image](image.jpg?fixOrientation) and debugged
/vendor/gregwar/image/Gregwar/Image/Adapter/Common.php (the external image manipulation library)

It reads the Exif (orientation:6) and decides to rotate as follows:

case 6: // 90 rotate right
  $this->rotate(-90);
  break;

With the following result:

When I use your code in Twig, I get the same correct result (albeit resized):

Thanks so much for your help - sorry for spotty response, I'm building this site while running a different company and can only work on certain days. I'll go through this tomorrow and see if I can spot what's going wrong. Thanks again!

I've run the same checks with gimp - which is useful as I hadn't seen that feature. Then I turned off Fix Orientation Automatically and stripped out all my fixOrientation tags in twig.

I uploaded this image:

And get this on the site (I cleared cache and reloaded)

Then I turn on fix Orientation Automatically and get this:

Then I re-add the fixOrientation twig tags and get this:

It's driving me up the wall - and I don't know how to debug to find out what's going on. All help appreciated...

@dan-james, Besides fixOrientation and auto_fix_orientation, there is a third player that may play with the orientation of the image: The browser.
See JPEG images are now rotated by default according to Exif data

Environment:

• Windows 10 using WSL with Ubuntu 20.04
• Chrome browser

My tests:

• Fresh download of Grav 1.6.26
• Downloaded the image from post 5
• Copied downloaded image (renamed to image.jpg) to '/pages/02.typography'

Test 1: Using fixOrientation in Markdown

• Added the following to default.md

  TXTCopy

  ![Image](image.jpg?fixOrientation)
  

• auto_fix_orientation: false
  Result: Image rotated 90 degrees clockwise
  

• auto_fix_orientation: true
  Result: Image rotated 180 degrees clockwise
  

  • Image library is being called twice to rotate the image.

Test 2: No fixOrientation in Markdown

• Added the following to default.md

  TXTCopy

  ![Image](image.jpg)
  

• auto_fix_orientation: false
  Result: Image rotated 90 degrees clockwise
  

  • Image is not rotated by Grav and is send to browser as is.
  • Browser automatically rotates the image based on Exif.

• auto_fix_orientation: true
  Result: Image rotated 90 degrees clockwise
  

Would you mind doing above steps in your system starting with a fresh download of Grav?

Thanks again for all this help.

I added the image on a fresh installation of Grav and the image is oriented correctly.

Then I wondered if the problem happens in twig, so I added this to the default.md file:

{% set image = page.media|first %}

{% block content %}
    {{ image.html }}
    {{ page.content|raw }}
{% endblock %}

and the image is correctly oriented.

So I changed it to

{{ image.cropZoom(500,500).html }}

and the image is incorrectly oriented. So the problem seems to lie in the fact that the php library creates a new image and caches is, presumably saved as the original but without the EXIF data?

Not sure how to fix this, as any file generated by the library will have EXIF stripped? Or am I misunderstanding the process?

More information. As I was trying to pin down the variable I remembered that I also resize the images on upload. They go from 8 or 10Mb down to 1500px wide. And when I turn on the upload resize option (in the Admin plugin) I cna reproduce the problem I have in the original website.

To recap, I start with a client's original image that they don't want to re-save or process before upload. So they upload a 10Mb image that gets resized to 1500px wide.

Then, when it gets processed by twig, it gets resize into 3 different versions.

If I don't resize in upload or twig, the orientation is fixed correctly.

If I resize in twig, the orientation is lost.

If I resize on upload AND in twig the orientation is reversed.

I guess my next step is to check the version made when the upload re-size happens...

@dan-james,

I can confirm, when resize option in Admin is on, the rotation of the image is wrong. According to Gimp, the original has been rotated with 180 degrees and suggests to rotate another 90 degrees.
As if the image has actually been rotated and the Exif remained the same.

Btw. auto_fix_orientation: false

When resize option in Admin is off, Exif remains ok. The image has just passed through without alterations.

Using your code in Twig:

{% set image = page.media|first %}

{% block content %}
    {{ image.cropZoom(500,500).html }}
    {{ page.content|raw }}
{% endblock %}

The image's orientation is as the original and still rotated 90 degrees anti-clockwise. That can be fixed with fixOrientation:

{{ image.cropZoom(500,500).fixOrientation.html }}

Now the image is shown correctly.

By the way, I'm using: auto_fix_orientation: false

At the moment, my guess is that resizing in Admin is causing the issue. Need some further digging...

Thanks for your continued help with this - and for your clearer explanation in the issue I raised on github - it's much appreciated!