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.

Comments

gausarts created an issue. See original summary.

gausarts’s picture

Issue summary: View changes
gausarts’s picture

Status: Active » Needs review
StatusFileSize
new988 bytes

The 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.

  • gausarts committed 20d8b4f on 8.x-2.x
    Issue #3211636 by gausarts, timlie, jacklee0410: Regressions with...

gausarts credited timlie.

gausarts’s picture

Status: Needs review » Fixed

Let's get the ball rolling. We need a new hotfix release for the latest covered issues and regressions.

timlie’s picture

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!

gausarts’s picture

Thank you.

I was too quick as it seemed :)

Unfortunately I cannot reproduce your latest issue, yet.

Please clarify:

timlie’s picture

Hi,

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!

gausarts’s picture

Status: Fixed » Active

I couldn't reproduce it, yet.

We need to be on the same page. Please screenshot your Blazy or Slick formatter form. Thanks.

gausarts’s picture

Please also reply to my 2 questions at #9? It is essential to narrow down the problem.

timlie’s picture

StatusFileSize
new5.5 KB
new25.11 KB
new9.89 KB
new731.04 KB
new634.53 KB
new1.24 MB
new798.5 KB

Hi,

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.

gausarts’s picture

Thank 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?

gausarts’s picture

If 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.

timlie’s picture

I 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.

gausarts’s picture

Status: Active » Needs work

You 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.

gausarts’s picture

This 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.

gausarts’s picture

Looks 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:

public static function transformDimensions($style, array $data, $initial = FALSE) {
    $uri = $initial ? '_uri' : 'uri';
    $key = hash('md2', ($style->id() . $data[$uri]));

    if (!isset(static::$styleId[$key])) {
gausarts’s picture

Status: Needs work » Needs review
StatusFileSize
new656 bytes

Added 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.

timlie’s picture

Status: Needs review » Reviewed & tested by the community

Thanks a lot! Great work!
This does indeed fix the issue.

  • gausarts committed 68ef164 on 8.x-2.x
    Issue #3211636 by gausarts, timlie, jacklee0410: Regressions with...
gausarts’s picture

Status: Reviewed & tested by the community » Fixed

Committed. Thank you for contribution.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.