Incorrect Orientation by Fancybox 3

  • Resolved jtcheng

    (@jtcheng)


    6 years ago

    Hi,

    I just recently ran into an issue where it appears that Fancybox 3 doesn’t properly maintain the orientation of a rotated image.

    In the link provided, you can see 2 portrait images. The first one is the erroneous one, where you can see Fancybox doesn’t maintain the portrait orientation. The second one is the correct one, where you can see that Fancybox does correctly maintain the portrait orientation.

    If you just go to the Amazon S3 links for each respective image:
    https://images.world-of-waterfalls.com/Ragged_Point_056_11172018.jpg
    https://images.world-of-waterfalls.com/Grand_Canyon_Desert_View_021_03302018.jpg
    you will see that they also have the correct orientation. This is what leads me to believe that something Fancybox 3 is doing is somehow not correct.

    Upon looking at the browser inspector, I see that something is convincing the fancybox-image-wrap class to style the rotated image one way (width:1219px height:813px) versus the correct way (width:541px; height:813px).

    I’m not sure what changed or what happened between the two images, but I’m trying to get to the bottom of this issue because I fear all new portrait images from here on out will be oriented incorrectly.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author w3dev

    (@w3dev)

    Hi, just getting to take a look at this now and your page appears to have the correct orientation now for all images. Can you share what the issue was?

    Thread Starter jtcheng

    (@jtcheng)

    There were layers of issues.

    First, for some reason, the most recent images uploaded to my Amazon S3 bucket were not displayed on FancyBox 3 with the proper orientation (I don’t use Media Library for this because it’s terrible at handling lots of images and thumbnails; I just serve them directly from Amazon S3 directly).

    My old process was that I would identify and rotate (as necessary) photos in Adobe Bridge, then batch re-size in in Photoshop Elements. This has worked for all the times I’ve been employing this method until two weekends ago.

    Amazon S3 showed the correct orientation, Bridge showed the correct orientation, and even straight img src tags showed the correct orientation. However, FancyBox 3 lightbox did not.

    So going back to what was different, I can only pin it down to the following:

    1) I had upgraded Fancybox 3 from version 1.0.12 to 1.0.13 (the latest version has issues [e.g. missing arrows in the lightbox, and thumbnails not showing up correctly] even if it may or may not be responsible for the incorrect image orientation; so I reverted back to 1.0.12)

    2) I had upgraded Adobe Bridge for stability reasons. Seems like even with the old version of Bridge, I couldn’t shake the incorrect orientation issue when displayed in Fancybox 3 lightbox.

    In order to fix the problem, I had to batch resize and re-orient in Python Pillow Library. When Python-processed images were uploaded to Amazon S3 Bucket, then it seemed like Fancybox 3 version 1.0.12 displayed the images correctly and consistently.

    Unfortunately, using Python’s Pillow meant EXIF info (including copyright info) was lost the moment I did an operation on the image. So I had to retroactively re-introduce such info onto the images in Adobe Bridge before uploading into Amazon S3.

    Anyways, as annoying as that was, it seems I have a predictable and reproducible photo processing and serving process once again. But I’m still hesitant to use the latest Fancybox 3 version due to its issues.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Incorrect Orientation by Fancybox 3’ is closed to new replies.