实验性 PhotoSwipeLightbox 组件出现意外缩放，破坏了原始图像的比例

用户体验
1

新的实验性 PhotoSwipeLightbox（siteSettings.experimental_lightbox）在图片链接存在于 Discourse Solved 或 admin/config/logo 中的上传组件时存在错误。根本原因是 PhotoSwipeLightbox 需要从已加载的图片中获取宽度和高度，而 Discourse Solved 和上传组件没有这些属性。

没有这些属性，图片将被拉伸以填满浏览器窗口，导致失真，如图所示。

此提交添加了一种预加载机制，用于获取没有尺寸的图片的尺寸，以便它们可以正常显示。

2 个赞
2

感谢您报告此问题并分享修复方案。

我在 PR 中添加了一些评论/建议，但总的来说，我认为我们需要一个像这样的后备方案来处理边缘情况。

4

好的，谢谢。我有空时会相应地在评论中加入见解。

  context "当缺少数据属性时" do
    it "预加载图片并设置尺寸" do
      upload_1.update(width: 400, height: 300)
      post.update(
        cooked:
          "<p><a href=\"#{upload_1.url}\" class=\"lightbox\" data-download-href=\"#{upload_1.url}\">[image]</a></p>",
      )

      topic_page.visit_topic(topic)
      lightbox_link = find("#post_1 a.lightbox")
      expect(lightbox_link["data-target-width"]).to be_nil
      expect(lightbox_link["data-target-height"]).to be_nil
      lightbox_link.click

      expect(lightbox).to be_visible

      expect(lightbox_link["data-target-width"]).to eq(upload_1.width.to_s)
      expect(lightbox_link["data-target-height"]).to eq(upload_1.height.to_s)
    end
  end

我将此添加到 lightbox_spec.rb 中，作为针对无尺寸图片的单元测试，这样看起来可以吗？

1 个赞
5

此外，我还对判别逻辑进行了一些修改，以处理那些具有元数据但元数据未能包含大小信息的（例如，上传组件）。

const missingMetaData = !item
    .querySelector(".meta")
    ?.textContent.trim()
    .split(/x|×/)
    .every((v) => v && +v > 0);
1 个赞
6

感谢您为此付出的努力并跟进拉取请求（PR）的审查。我现在已将其合并。

1 个赞
7

@davidb 看起来最近对灯箱组件的提交存在一个错误，阻止了组件在 discourse solved 等项目中启动。
这个问题可能与此提交有关
FIX: maintain extension when quoting images by SamSaffron · Pull Request #36240 · discourse/discourse · GitHub, Pull requests · discourse/discourse · GitHub
/36214。我不太确定。
现在可以在这里重现问题。
Unexpected latest listing
比如点击给定页面中引用或 discourse solved 组件里的 [IMG_6085]。

1 个赞