Unexpected scaling in experimental PhotoSwipeLightbox component breaking the ratio of the original image

UX
7

@davidb It seems that one of the recent commit to the lightbox component has a bug preventing the component from starting in discourse solved and other items like that, after my PR get merged.

The problem may be related to this commit.

FEATURE: allow quoting an image from the lightbox by SamSaffron · Pull Request #36156 · discourse/discourse · GitHub.

I’m not quite sure whether this PR actually breaks that.

The repro can be done here right now.

Like clicking the [IMG_6085] from the onebox quote, or open the link and click the image of the answer in discourse solved component of the given page. The original behavior is open a lightbox, but now nothing happened.

The console shows an error: Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

Related code is:

// this ensures that cropped images (eg: grid) do not cause jittering when closing
data.thumbCropped = true;

data.src = data.src || el.getAttribute("data-large-src");
-> data.origSrc = imgEl.getAttribute("data-orig-src");
data.title = el.title || imgEl.alt || imgEl.title;

Maybe turning the code into the following will work:

data.origSrc = imgEl?.getAttribute("data-orig-src") || el.getAttribute("data-orig-src") || null;

data.base62SHA1 =
    imgEl?.getAttribute("data-base62-sha1") || el.getAttribute("data-base62-sha1") || null;

data.targetWidth =
    el.getAttribute("data-target-width") || imgEl?.getAttribute("width") || null;
data.targetHeight =
    el.getAttribute("data-target-height") || imgEl?.getAttribute("height") || null;

A PR fix has been applied here:

1 Like