Incorrect aspect ratio displayed for thumbnails

[markgllin]

Describe the bug
I've been using the docker nightly build and have noticed recently that the incorrect aspect ratio is being used for thumbnails. I switched over from the latest docker build but noticed it had memory issues but aspect ratio was displayed correctly with that version.

Unfortunately, I don't have any particular reproduction steps, it just seems to happen with most of my pictures (although some are displayed correctly for some reason)

Photo/video (optional) that causes the bug
An example photo:

Screenshots
However, the thumbnail is displayed with equal height and width

Environment (please complete the following information):

• I'm currently running PiGallery on a Raspberry Pi 4, 64-bit enabled within docker
• I've been able to repro on both Chrome and Firefox (unable to load on safari)

Used app version:

• docker-nightly (specifically alpine)

Happy to provide any more details/logs I can. As far as I can tell, no errors appeared in the logs during thumbnail creation or indexing

[markgllin]

looking through past issues, this looks like it's related to #172 and #19

[bpatrik]

yes for some reason I could not figure out why these photos are rotated. I'll try to give an other look with your photo.

[LorenzBischof]

This also happens for me on the nightly build. The same picture (thumbnail) is shown correctly in the album art though.

[bpatrik]

Yes its a new issue. With 1.8.0 the error would occure once you zoom in. Could not find the source of it yet.

[LorenzBischof]

I'm not sure what you mean with "rotated". I was able to fix this behavior by adding object-fit: cover to the img. This also seems to be relatively well supported: https://caniuse.com/object-fit.

[bpatrik]

Thanks for the PR, but I'm not sure that it will fix the issue.

The issue is the following:

• Some of the photos are rotated in the bitmap, but the exif data signals that rotation (more here). Since recently, browser can handle it and based on the exif data rotate it back.
• Grid is rendered based on the information that the server can read from the photo. It can read the original (bitmap) width and height and the info in the exif (exif width+ height + orientation)
• Some of the photos (seems to be related to Iphone) are correctly rotated in the bitmap, but exif data suggest that their orientation is still not correct. Others photos are not correctly rotated and exif data also suggest their orientation is not correct.

I tried to resolve this, bit on the server side I could not figure out in which case should I rotate the dimension(width and height) of the photo and in which case not. I found that taking the orientation data into account produces more valid results than the other way around.

This is the code in question:

pigallery2/src/backend/model/threading/MetadataLoader.ts

Line 88 in 8c26549

public static loadPhotoMetadata(fullPath: string): Promise<PhotoMetadata> {

I think setting object-fit:cover will result in some cropping, isn't it?

[LorenzBischof]

Sorry, I did not test in Chrome. Yes in Firefox it gets cropped a little, but is not distorted anymore.

[bpatrik]

Lets keep the conversation in #212 as that has more interactions. Closing this as it a duplicate.