Problem/Motivation
The lightbox dimesions are borked at 2.2. Was fine at 2.1.
Originally reported here:
#3179924: Photoswipe image displays being distorted
The culprit, or precisely stupidity, was found here:
https://git.drupalcode.org/project/blazy/commit/9c68c7f#ab86487c64bd66e0...
Why this regression happened?
https://git.drupalcode.org/project/blazy/-/blob/8.x-2.x/src/BlazyMediaIn...
* @todo rework this for core Media, and refine for theme_blazy(). One big TODO
* for the next releases is to replace ImageItem references into just $settings.There was a big TODO, executed earlier than planned, or precisely incrementally without thorough checks, that is to get rid of "ImageItem references into just $settings"
Steps to reproduce
- Under Media switcher option, add Image to Blazy PhotoSwipe without Lightbox image style filled in aka original image.
- Another way to reproduce it is by giving small images.
Proposed resolution
Temporary solutions:
https://www.drupal.org/project/blazy_photoswipe/issues/3179924#comment-1...
Real solutions:
Revert these lines:
- $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'];Remaining tasks
Write a patch, review.
User interface changes
None. The fix should fix the issue without any change to UI.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | 3211636-regression-dimensions-20.patch | 656 bytes | gausarts |
| #13 | photoswipe_image_2.PNG | 798.5 KB | timlie |
| #13 | photoswipe_image_1.PNG | 1.24 MB | timlie |
| #13 | thumbnail_gallery.PNG | 634.53 KB | timlie |
| #13 | images_overview.PNG | 731.04 KB | timlie |
Comments
Comment #2
gausarts commentedComment #3
gausarts commentedThe fix here #3210344: Broken CSS background and responsive image styles with aspect ratio Fluid help fix the issue specific for responsive image integration as lightbox triggers with aspect ratio Fluid.
But apparently still broken for regular images as lightbox triggers. Hence why the revert is still needed for regular images, as well.
Comment #7
gausarts commentedLet's get the ball rolling. We need a new hotfix release for the latest covered issues and regressions.
Comment #8
timlie commentedHi 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!
Comment #9
gausarts commentedThank you.
I was too quick as it seemed :)
Unfortunately I cannot reproduce your latest issue, yet.
Please clarify:
Comment #10
timlie commentedHi,
I have tried to debug a bit more.
My images in the lightbox are images apllied with an image style. The image style only scales on width, not height.
On one of my dev sites the above mentioned:
"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."
is true.
On another, it "seems" like the shown images are scaled to the max heigth of the portrait images which are uploaded, and the max width of the landscape images. So the portrait and landscape images have the same displayed size.
Thanks for your follow up!
Comment #11
gausarts commentedI couldn't reproduce it, yet.
We need to be on the same page. Please screenshot your Blazy or Slick formatter form. Thanks.
Comment #12
gausarts commentedPlease also reply to my 2 questions at #9? It is essential to narrow down the problem.
Comment #13
timlie commentedHi,
I did clear the cache. When down and upgrading the module I can undo and make the problem appear again.
It's not a responsive image.
I show you some screenshots to show my settings.
Comment #14
gausarts commentedThank you.
Weird they are still stretched.
The only that pops:
https://www.drupal.org/files/issues/2021-05-03/image_style_p009_media_fu...
Try removing "Automatically correct orientation". Just scale.
I never use that effect, is it image_effects.module?
Comment #15
gausarts commentedIf still an issue, you must apply the mentioned patch or use DEV version just to be sure.
We need to be on the same latest DEV.
The reason is that other patch contains common fixes.
Comment #16
timlie commentedI have version dev-2.x cb714d0
Removed the "Automatically correct orientation" but no effect. Still same distorted images.
I'll try this evening to debug a bit further as it is strange you can not reproduce this. Maybe there is something other wrong in my config.
Comment #17
gausarts commentedYou are right. I couldn't reproduce it till I add image style with scale.
The other patch here #3210344: Broken CSS background and responsive image styles with aspect ratio Fluid has fixed the Responsive part, but apparently broke Image style calculations due to being cached. Quoted my own observations:
https://www.drupal.org/project/blazy/issues/3210344#comment-14073305
> It used to work without cache, now suddenly broken. I think something else broke it.
While that cache fixed the Responsive image styles, it apparently broke regular images specific to scale.
Immediate workarounds for now:
use crop or original sizes, not scale.
Setting this to Need work here since it affects regular images.
Comment #18
gausarts commentedThis is the offending line:
https://git.drupalcode.org/project/blazy/commit/69865d5#6ad561ccf84b58d6...
We can only cache this for crop or responsive image, not scale.
The reason for the cache in that issue was due to this method being called twice at Responsive image:
https://www.drupal.org/project/blazy/issues/3210344#comment-14073305
> Basically the underlying problem now is that BlazyUtil::transformDimensions is called multiple times causing the previously set values overridden by the following values which are similar.
Tracking "I think something else broke it." might take time.
We'll try to revert the cache, or refine it with another check.
Feel free to share your solutions or findings. Thanks.
Comment #19
gausarts commentedLooks like #15 already gave the clue:
> This line might need more unique key:
+ $key = hash('md2', $style->id());Adding more uniqueness by uri appears to fix the issue here:
Comment #20
gausarts commentedAdded the uniqueness to the key.
We can always optimize this later for the crop or Responsive image like already did at the container level, but we should avoid premature optimization to avoid headaches for now.
Let me know if this fixes it at your end? Thanks.
Comment #21
timlie commentedThanks a lot! Great work!
This does indeed fix the issue.
Comment #23
gausarts commentedCommitted. Thank you for contribution.