Image Orientation Issues

[Kr4ken-9]

Hello, I am wondering if you happened to know what is causing me to experience image orientation issues with particular images. If needed, I can provide you with said images.

This is an example of what the images look like when used in the gallery:

It may not be immediately apparent, but the outermost images are supposed to be oriented in portrait mode (or rotated 90°, I am not familiar with photography very well). The innermost images are oriented correctly in landscape mode.

For a while I have been using a workaround I found on Google, but it doesn't work very well, and I saw you mention in another thread that you should probably avoid this method.

.blueimp-gallery > .slides > .slide > img[title="1"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.blueimp-gallery > .slides > .slide > img[title="4"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
</style>

Using this code I have managed to manually rotate and correct the image orientation resulting in this:

Again, I am not an expert, but I used a tool called exiftool that you mentioned in another issue to verify my findings.

In this image you can see the orientation for one of the innermost images is horizontal, as expected, and the orientation for one of the outermost images is supposed to be rotated 90° clockwise, which you can see is not happening.

So, do you have any idea what could be causing this? Should I just resort to using another tool I found which was called autorotate, I think? Thank you for helping

[blueimp]

Hi @Kr4ken-9, the Gallery does not automatically correct image orientation.

I do have a related project that does automatic image orientation based on EXIF data - it's not integrated in the Gallery project, but you could potentially implement this with your own image factory implementation: https://github.com/blueimp/JavaScript-Load-Image

On the other hand, modern browsers are also implementing automatic image orientation based on EXIF data, e.g. the latest versions of Chrome, Safari and Firefox.

If you need cross-browser support, my recommendation is to do the automatic image orientation on server-side.

[Kr4ken-9]

Thank you for clearing that up. I am not familiar with images in general and how EXIF data is handled. I will look into other solutions for this.