pigallery2: Incorrect aspect ratio for thumbnail/preview

Describe the bug Thumbnail/preview has incorrect aspect ratio for one of my images, as shown in screenshot below. The image is also linked below.

Photo/video (optional) that causes the bug See zip: https://www.dropbox.com/s/ee7vw513vl79nuv/testimg.tar.gz?dl=0

Screenshots Left thumbnail has correct aspect ratio. Right one (__a20180218_143832_dc8f44e06e4a.jpg) is incorrect. Both images are attached in link above.

Environment (please complete the following information):

Browser: Firefox 84.0 (64-bit)
OS: Ubuntu 20.04.1

Used app version:

docker-nightly. See screenshot below for version.

docker-compose.yml:

version: '3'
services:
  pigallery-db:
    container_name: pigallery-db
    image: mariadb
    volumes:
      - db-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=putsomethinginherethatyouwouldlikeasthepassword
      - MYSQL_USER=pigallery2
      - MYSQL_PASSWORD=pigallery2_pass
      - MYSQL_DATABASE=pigallery2

  pigallery2:
    image: bpatrik/pigallery2:nightly-stretch
    command: sh -c 'bin/wait-for pigallery-db:3306 -- --Server-Database-mysql-host=pigallery-db --Server-Database-mysql-username=pigallery2 --Server-Database-mysql-password=pigallery2_pass --Server-Database-mysql-database=pigallery2'
    container_name: pigallery2
    environment:
      - NODE_ENV=production
    volumes:
      - "/mnt/data/tmp/PiGallery2/config:/app/data/config" # CHANGE ME
      - "db-data:/app/data/db"
      - "/mnt/data/tmp/pic_collection:/app/data/images/pic_collection" # CHANGE ME
      - "/mnt/data/tmp/pic_collection2:/app/data/images/pic_collection2" # CHANGE ME
      - "/mnt/data/tmp/PiGallery2/tmp:/app/data/tmp" # CHANGE ME
    ports:
      - 80:80
    restart: always

volumes:
  db-data:

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 20 (6 by maintainers)

Commits related to this issue

Improving orientation detection #212, #184, #234 — committed to bpatrik/pigallery2 by bpatrik 3 years ago
Fixing Orientation reading issue and adding orientation reading tests #212 — committed to bpatrik/pigallery2 by bpatrik 3 years ago

Most upvoted comments

Thanks for detailed response. The new update seems to work well for sample images. I will update later if all my albums look okay (i moved few things; need to move files back to RPi).

I have no expertise in JS but this lib claims to be “fastest and most versatile JavaScript EXIF reading library’” : https://mutiny.cz/exifr/

cbhushan on Mar 29, 2021

Results below with new docker image + db reset. Some orientation cases are definitely fixed, while others are not, specially landscape ones. Images from https://github.com/recurser/exif-orientation-examples

cbhushan on Mar 28, 2021

Thanks for the update. I will check the new code later and let you know how it worked.

As you can see for gold and canyon width < height (not correct!) and orientation tag suggest, it should be rotated. While for roof height < width (correct) and orientation tag suggest, it should be rotated.

I think your interpretation of exif “width” and “height” is inaccurate (although your final solution might be doing the right thing). Exif width and height only define the number of Pixels in X-dimension and Y-dimension respectively of pixel matrix before any additional rotation. Look for ImageWidth and ImageLength in exif specification (another ref) . They do not imply final width and height after applying all orientation stuff, and may have width < height even for portrait mode.

I would also suggest to check following:

https://github.com/recurser/exif-orientation-examples : Good repo with examples of all possible types of orientation tags for testing.
See exif_transpose function in python Pillow library, which performs the orientation as per exif.
Check Phil Harvey’s response in this thread about the logic to find landscape images: https://exiftool.org/forum/index.php?topic=7523.0

cbhushan on Mar 27, 2021

OK, database reset did the trick. Now it is working! Thanks, seems you fixed the issue (at least for me).

h0n2a on Mar 27, 2021

Btw., tried to change some css parameters in the browser dev console, and if I set “width:auto;” for <app-gallery-grid-photo> (instead of the current computed value), the result si good, thumbnails are displayed correctly.

Can confirm this appears to solve the issue. It may have some consequences for the layout, but those appear minor.

vomov on Feb 24, 2021