Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ault Nathanielsz 87 posts 407 karma points c-trib
    Aug 24, 2021 @ 17:07
    Ault Nathanielsz
    1

    Unwanted rotating images

    I think that this explains an issue and proposes a solution. Hopefully I can get some comments on it to confirm or correct it.

    Image Rotation

    When some cameras take an image in portrait orientation, they save a landscape image with a flag in the exif data specifying the correct (portrait) orientation.

    Issue

    Unless an image is being served directly from the media library, Umbraco uses ImageProcessor to edit the image and save a cached version of the resulting file. By default, the config file for ImageProcessor is set to: preserveExifMetaData="false". This means that the orientation flag is removed – which can result in images that appear “sideways”.

    Solution 1:

    If the config file is changed to preserveExifMetaData="true", the orientation flag is preserved – and the image displays correctly.

    Exception:

    We encountered a situation where we use ImageProcessor to preserve an image’s original dimensions (e.g. 3:4) add blank space to it to make a file with new dimensions (e.g. 16:9).

    In this instance, ImageProcessor adds the whitespace correctly to the image (e.g. on the left and right). BUT… Unfortunately, it also preserves the orientation flag. Therefore, the correct image is subsequently rotated to what the browser assumes is its correct orientation, which is now not correct.

    Solution 2:

    Leave the config file in its initial preserveExifMetaData="false" state, and add “autorotate=true” to a querystring in the image URL.

    eg: src="@model.image.GetUrl()?autorotate=true"

  • Marc Goodson 2133 posts 14293 karma points MVP 8x c-trib
    Aug 24, 2021 @ 20:33
    Marc Goodson
    100

    Hi Ault

    If you go down the route of adding? autorotate=true on all your images then check out this package:

    https://our.umbraco.com/packages/website-utilities/auto-auto-rotate/

    Which uses an event that ImageProcessor raises before it processes the image and appends the autorotate query string parameter to the url...

    ... So basically only one place to add it...

    Regards

    Marc

  • Ault Nathanielsz 87 posts 407 karma points c-trib
    Aug 25, 2021 @ 12:10
    Ault Nathanielsz
    0

    That looks perfect. Will install straightaway.

  • Markus Rytterkull 25 posts 116 karma points
    Nov 02, 2021 @ 16:51
    Markus Rytterkull
    0

    Ault, did this solve your case?

    I have a customer (version 8.16) who just had the same issue on a few images. Not sure why these images are upside down, but they are.

    Checked my config and the AutoRotate plugin was already set up: preserveExifMetaData="false" and

    Still, when I added "?autorotate=true" to the faulty image through markup, it was displayed correctly again. So I guess the autorotate plugin is not working on all images on this setup.

    Did the plugin work out of the box for you?

  • Ault Nathanielsz 87 posts 407 karma points c-trib
    Nov 02, 2021 @ 16:59
    Ault Nathanielsz
    0

    Markus, I'm afraid I didn't install the plugin, as I already had the autorotate code in place and the site went live sooner than expected. Since that time I've been getting our basic package adapted to v9, and have yet to seriously tackle the images.

    I'll let you know when I do. (Thankfully, I have the wonky ones from the production site, so I can test them when I come to it.)

  • Markus Rytterkull 25 posts 116 karma points
    Nov 02, 2021 @ 17:15
    Markus Rytterkull
    0

    Ok, thanks for your reply! I'll try to see what is happening (or not) with our routing.

Please Sign in or register to post replies

Write your reply to:

Draft