Problem with image orientation on upload

Kirby 3 Issues 🐛
1

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

20180609_171919
20180609_171919.jpg2048×1152 630 KB

Original file was:
20180609_171919%20copy
20180609_171919 copy.jpg2112×3756 2.68 MB

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
20171219_105856.jpg2048×1152 318 KB

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.

7

Hi, still not sure, how to solve this. Can you please check? Here are photos, that are changing orientation after upload https://www.dropbox.com/s/ccnhole82rhmm9n/images-orientation.zip?dl=1

8

@Roman Have you tried with the hook?

9

Tried to understand, made some codes, but clearly lacking knowledge of Kirby and programming. So it should be plugin?

10

Made a plugin with code, don’t know if it’s right? Files are rotated in the same way after upload.

<?php

Kirby::plugin('roman/kirby-auto-orient-images', [
    'hooks' => [
        'file.create:before' => function fixIphoneOrientation($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());

        }
    }
}


        }
        
        
        
        
    ]
]);
11

You have to use an after hook, not before. And as @bvdputte said, the code required the ImageMagick library.

12

also tried with file.create:before

13

The code snippet above uses before, not after. What about ImageMagick?

14

Yes, sure, I mean I tried both. About ImageMagick, don’t have it, as this test php - Verify ImageMagick installation - Stack Overflow returns:
Fatal error : Uncaught Error: Class ‘Imagick’ not found in /home/metalista/domains/domain.lt/public_html/im.php:7 Stack trace: #0 {main} thrown in /home/metalista/domains/domain.lt/public_html/im.php on line 7

15

I am using shared hosting and can’t install ImageMagick, so would be really good to solve this some other way.

16

You could try imagerotate() instead: https://www.php.net/manual/en/function.imagerotate.php

17

@Roman The dropbox link above doesn’t work for me?

18

Checked, it’s working withoug being logged in. Maybe because it’s set to download straight away. Try this link https://www.dropbox.com/s/ccnhole82rhmm9n/images-orientation.zip?dl=0

19

Hm, I tried in different browsers, but only get an error message “There was an error downloading your file.”.

20

Let’s try this https://we.tl/t-SEpCSpUeG2