Problem with image orientation on upload

#1

For some images, that have vertical orientation, after I upload, they become horizontal and stretched. Here is example.


Original file was:

I tried to write in /site/config/config.php

  'thumbs' => [
    'autoOrient' => false
  ]

After this image is rotated 90 degrees. Tried to upload same image to Facebook, and orientation is left the same, no rotation. Here is that image (becomes rotated like this after upload)

20171219_105856

#2

I just uploaded your original image (the one with people in) to my own site just fine and didn’t get it rotated or stretched. Any more information you can give us?

#3

I’ve had image rotation issues in the past with K2; I’ve narrowed it down to an edge-case with “iPhone photo’s” which are uploaded unaltered to the website. It seems like they have some metadata setup which confuses Kirby.

I “fixed” this for my use-case in a hook with this code:

kirby()->hook(['panel.file.upload', 'panel.file.replace'/* , 'panel.file.update' Necessary? */], function($file) {
    if(array_key_exists("Orientation", $file->exif()->data())) {
        if ($file->exif()->data()["Orientation"] == 6) {
            $img = new Imagick($file->root());
            $imageprops = $img->getImageGeometry();
            $width = $imageprops['width'];
            $height = $imageprops['height'];

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

:warning: This code needs imagemagick on your server!

Edit: It seems like this has been brought up on the forum recently again. More info: iPhone Images Rotated Incorrectly
and iPhone Images Rotated Incorrectly

#4

Thank you, will try it. Can you please guide me, where I should put this code? Just I am new to Kirby. Should it be in /site/config/config.php file?

By the way, from meta data I see that photo was made with Samsung (SM-G920F).

jimbobrjames, I think the reason you get good orientation is that after I uploaded here, file went through some changes and got different meta information. I tried to download it from here and upload, and all is correct then.

#5

Either in your config or in a plugin. It’s more versatile in a plugin, then you can reuse it more easily in other projects.

Note that you have to adapt the code for Kirby 3. the way hooks are registered and the names of the hooks have changed.

#6

Quite probably. You can strip metadata with Apple Preview by going in the Inspector from the menu. Not sure if there is a way on Windows, maybe with Photoshop. Tools like ImageOptim will strip it off too. But of course, that doesn’t help you if you actually want to use some of the meta data in your template. Maybe just removing the orientation info is enough.