Photoswipe image displays being distorted

Thanks. Feel free to share solutions. I don't currently work on it, sorry.

Thank you.

I couldn't reproduce it with large images.

I could reproduce it with small images.

Potential solutions:

1. Temporary disable any image style options (Image style, Lightbox image style) for both inline and lightbox displays to prove they should display correctly. Verify the displays OK. Now you know that it is okay, move on to your old setup, but try the second solution.
2. Upload larger images. The reason, small images will be scaled up, hence stretched, incorrectly.
3. Keep the same aspect ratio for both inline and lightbox image styles. This is recommended, but might not always fit the expected image displays due to cropping. This behavior is actually the same as the #1, leaving the images without image styles. Meaning both inline and lightbox actually have the same aspect ratio.

So the real solution is:

• keep the same aspect ratio for both displays,
• or upload large images to avoid unwanted aspect ratio stretch.

The reason, thumbnail displays determines the actual displays due to opts.getThumbBoundsFn aka the thumbnail zoom animation:
https://git.drupalcode.org/project/blazy_photoswipe/-/blob/8.x-1.2/js/bl...

The last potential solution, comment/ disable the opts.getThumbBoundsFn at your theme override.

This appeared to have nothing to do with the module unless proven otherwise. Feel to provide patches if you find the culprit.

Please let me know if still an issue.

Hi gausarts,

For me this is triggered by updating to latest blazy:^2.2
First I thought it was because of updating to blazy_photoswipe:^1.2 but issue was still there when downgrading to 1.1.
After downgrading blazy, the distortion is gone.

I use an image style which only scales the width (for the "lightbox image style)" so we have no cropping on landscape or portrait images when showing in the photoswipe "lighbox".

Now when using blazy:^2.2 images shown in the photoswipe lightbox are distorted.

If I change to an image style which has fixed dimensions for width and height (cropping) then the image is displayed correctly.

Is there a way to update to blazy:^2.2 and stay with a scaled width image (so no cropping is needed)?

Thanks!

Thanks for tracking down the issue.

This should narrow down the culprit, then.

I will see if anything I can narrow down more to fix it unless you beat me to it.

I think I found the culprit:
https://git.drupalcode.org/project/blazy/commit/9c68c7f#ab86487c64bd66e0...

-    $settings['box_width']  = isset($item->width) ? $item->width : (empty($settings['width']) ? NULL : $settings['width']);
-    $settings['box_height'] = isset($item->height) ? $item->height : (empty($settings['height']) ? NULL : $settings['height']);
+    $settings['box_width']  = empty($settings['width']) ? NULL : $settings['width'];
+    $settings['box_height'] = empty($settings['height']) ? NULL : $settings['height'];

This should be reverted here: #3211636: Regressions with lightbox dimensions

Please follow up there. And thanks again for helpful info. Much appreciated.

The fix was in #3211636: Regressions with lightbox dimensions. Feel free to re-pen if still an issue. Thanks.

Hi gausarts, thanks for the really fast follow up on this issue.

For me this does not seem fixed. The first image (from a gallery) in the photoswipe lightbox is shown correctly but the following images take over the dimensions from the first, which makes them distorted again. When changing images from place in the gallery, its always the first one which is correct all the others take over the dimensions.

Thanks!