Problem with image orientation on upload

[texnixe]

That worked. I’ll look into it asap.

[texnixe]

@Roman “Unfortunately”, your images upload alright in my test environment (tested with both Mamp and Valet), so I can’t really test anything. In fact, I have never run into issues with (iPhone) image rotation myself. I will try tonight on a remote server to see if I can somehow reproduce it.

[Roman]

Thank you, I see, just to clarify, these photos were made with Samsung:

And I am working with Mac, maybe it’s somehow connected. And in this case tested on remote server.

Also tried with another CMS, and image is rotated the same way. However, if I send it by Gmail, it’s not rotated.

[jimbobrjames]

If it helps the team test this out, i did stumble on a Github repo that contains images with every possible orientation flag on it. @Roman Maybe try some of those, to rule out the camera (i dont think thats the cause, but who knows).

recurser/exif-orientation-examples

If you have imagemagick installed on your mac, you can fix them on the command line with:

mogrify -auto-orient your-image.jpg

If you have a whole bunch to fix, you could probably automate that by using find command and piping it through to mogrify, so it does it recursively.

[Teunis]

Having the same issue on my test site.
Any chance on making this work with GD?

Currently I have made a combination with another resize plugin. Will upload it to github later. (will edit this post)

[jonasfeige]

I was running into the same issue when users uploaded iPhone photos from the frontend. From the images on the Github repo @jimbobrjames mentioned I was able to find out which image orientation settings were problematic and updated the hook mentioned above accordingly. Maybe it can help someone. (Imagick required)

<?php

Kirby::plugin('your/plugin', [
    'hooks' => [
        'file.create:after' => function ($file) {

            $problematicOrientations = [5, 6, 7, 8];

            if (array_key_exists("Orientation", $file->exif()->data())) {
                $fileOrientation = $file->exif()->data()["Orientation"];
                if (in_array($fileOrientation, $problematicOrientations)) {
                    $img = new Imagick($file->root());
                    $imageprops = $img->getImageGeometry();
                    $width = $imageprops['width'];
                    $height = $imageprops['height'];

                    if ($fileOrientation == 5) {
                        $img->flipImage();
                    }
                    if ($fileOrientation == 7) {
                        $img->flopImage();
                    }
                    if ($fileOrientation == 8) {
                        $img->flipImage();
                        $img->flopImage();
                    }

                    $img->rotateimage("#000", 90);
                    $img->stripImage();
                    $img->resizeImage($height, $width, Imagick::FILTER_LANCZOS, 0.9, true);
                    $img->writeImage($file->root());
                }
            }
        }
    ]
]);

[sciloqi]

@jonasfeige Thanks a lot, this saved my day – before that, all images with a rotation in the exif data were incorrectly calculated using $image->resize(). Wish this would make it into Kirby itself!

[squareclouds]

hi everyone. now i am having trouble with this as well. it happens if i upload via my own frontend or via the panel. portait images get marked as landscape. at the moment i only have an iphone here, so i cannot test other devices. screenshots work fine

uploaded via my frontend

uploaded via panel

this happens both on my local server and on the production server.

@jonasfeige i have tried your hook but with no success. i am not sure if i have imagick. if every other resizing, cropping, srcset, etc, image operation is working, i assume i have it?

i appreciate any help

EDIT:
just checked on the server by running

convert -version

and it seems i have it

Version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
Copyright: (C) 1999-2021 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP(4.5) 
Delegates (built-in): bzlib djvu fftw fontconfig freetype heic jbig jng jp2 jpeg lcms lqr ltdl lzma openexr pangocairo png tiff webp wmf x xml zlib

but the hook is not working still. i can upload images that have no problems, but the problematic ones… nothing happens and the image does not get uploaded

[rasteiner]

The above hook relies on Imagick to be installed, not ImageMagick.
Imagick is a PHP extension; ImageMagick is a standalone executable. Maybe you don’t have Imagick installed (you’d see this in the result of a phpinfo() call).

Kirby comes bundled with SimpleImage (a PHP library that is used under the hood when you use the “GD driver”).

Maybe try the following hook instead:

<?php
use claviska\SimpleImage;

Kirby::plugin('your/plugin', [
    'hooks' => [
        'file.create:after' => function ($file) {
            $orientation = $file->exif()->data()['Orientation'] ?? 1;
            if($orientation !== 1) {
                (new SimpleImage)
                    ->fromFile($file->root())
                    ->autoOrient()
                    ->toFile($file->root());
            }
        }
    ]
]);

(I didn’t test this, no Idea if it works… But it should be worth a try if the images aren’t too big to fit into PHP memory).

[squareclouds]

@rasteiner thank you, i had time to try this today… sadly i get this on MAMP and the online server

[squareclouds]

@rasteiner BTW i just checked on the live server, apparently imagick is there

but the upload stays stuck when i use your original code that uses imagick

[squareclouds]

ok, i got imagick working on MAMP and i can confirm that the original code works… but on my server the upload still just stays like that

[rasteiner]

@squareclouds

Have you copied also this part:

use claviska\SimpleImage;

?

[squareclouds]

it wooorks :0 thank you! and this works also on the server, somehow imagick stayed stuck, as i mentioned before.