PhotoSwipeLightboxコンポーネントの予期せぬスケーリングにより、元画像の比率が崩れる

UX
1

新しい実験的な PhotoSwipeLightbox（siteSettings.experimental_lightbox）には、Discourse Solved 内に画像リンクが存在する場合や、admin/config/logo のアップロードコンポーネントに画像リンクが存在する場合にバグが含まれています。根本的な原因は、PhotoSwipeLightbox が既に読み込まれた画像から幅と高さを必要とするのに対し、Discourse Solved とアップロードコンポーネントにはこれらの属性がないことです。

これらの属性がないと、画像はブラウザウィンドウ全体を埋めるように引き伸ばされ、添付された図に示すように歪みが発生します。

このコミットは、寸法のない画像の寸法を取得するためのプリロードメカニズムを追加し、正常に表示できるようにします。

「いいね！」 2
2

ご報告いただき、また修正を共有いただきありがとうございます。

PRにコメントや提案を追加しましたが、全体として、このようなフォールバックが必要だと考えています。これにより、エッジケースをキャッチできます。

4

OK、ありがとうございます。空いたときにコメントに応じて洞察を加えます。

  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 にユニットテストとして追加しますが、問題ないでしょうか？

5

また、メタ情報を持つがメタ情報にサイズ情報が含まれていない（つまり、アップロードコンポーネント）場合の差別ロジックをいくつか変更しました。

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