Image lightboxing は、手動リサイズや[grid]タグを認識しません。

バグ
1

優先度/重大度: 低。
プラットフォーム: Firefox 127.0 (Windows 10) および Chrome 125.0.6422.165 (Android 14) で確認済み。
説明: 以下を参照。
再現手順: 解像度が 690×500 ピクセル以下の画像をアップロードし、手動でサイズ変更するか (例: ![|336x456,x150](upload://uoNNF6SaHfaM6bRapNRZoeKQqjU.png))、[grid] 内に配置します (例: [grid] ![|336x456](upload://uoNNF6SaHfaM6bRapNRZoeKQqjU.png) [/grid])。

期待される動作

Discourse のライトボックス機能は、投稿内で画像が縮小された場合、クリックすると元の解像度で表示されるように設計されています。

問題点

現在の実装にはバグがあります。画像の元の解像度と、サイトの「最大画像幅」および「最大画像高さ」の設定（デフォルトは 690×500 ピクセル）のみを比較し、手動でのサイズ変更や画像グリッドは無視されます。 この結果、縮小された画像が [最大画像幅]×[最大画像高さ] より小さい場合、ライトボックスが表示されないことがあります。

手動でのサイズ変更[1]

画像を手動で縮小した場合にライトボックスが正しく適用されない例を以下に示します。以下の画像をマウスオーバーすると、ライトボックスの表示が不均一であることがわかります。ライトボックスが表示されている画像をクリックすると、左右の矢印キーで一部の画像が表示されないことがわかります。[2]

557×1169 463 KB
678×811 395 KB
336×456 39.1 KB
771×900 324 KB
145×222 38 KB

画像グリッド

画像グリッドの問題は、グリッドがほぼ常に画像をリサイズし、多くの場合トリミングさえするため、クリックして元の画像を表示できないという問題が発生することです。

640×480 68.2 KB

640×480 85.5 KB

640×464 51.9 KB

640×182 11.1 KB

解決策

更新された提案解決策は、以下のディスカッションで見つけることができます。

当初提案された解決策… 解決策は、以下のことを確実にすることです。
  1. ライトボックスは、ページ上の画像のサイズと元の解像度を比較すること。
  2. グリッド内の画像は常にライトボックス表示されること。

私の理解では、ライトボックスの適用はクライアントサイドで行われるため、少なくとも、非常に困難ではないと思います！

  1. この問題の一部は以前フォーラムで言及されていました。そのスレッドでは、解決策についてもほぼ同じ結論が導き出されていました。 ↩︎

  2. 当初、これは別途報告した問題により、重大なフォーマットの問題を引き起こしましたが、この投稿を編集し、この部分を記述した時点では、すでに修正されています。 ↩︎

「いいね！」 6
2

私の考えの一つはこうです：すべての画像をライトボックス化しない理由はあるのでしょうか？ 少なくとも、情報バーとモバイルの「展開」アイコンに快適に収まり、画像の一部を覆い隠しすぎない画像です。ライトボックスには、フル解像度の画像を見られるという点以外にも、2つの価値があります。

  • 代替テキストが表示される（特に、代替テキストはプリセットされており、タイトルテキストの構文はより難解なため、投稿者が提供する可能性がはるかに高い）、そして
  • ライトボックスをクリックした後に画像をめくるときに、画像が省略されない。

完全に表示できる画像をライトボックス化しない理由はあるのでしょうか？

一つの選択肢として、グリッド内のすべての画像をライトボックス化するだけでなく、ページ上の特定のサイズ以上のすべての画像（例えば、72×72ピクセル以上など）をライトボックス化することも考えられます（ここでは行数で考えています。約3行以上のサイズ）。どう思いますか？

「いいね！」 1
8

私も過去にこの問題を提起したことに同意します。OPでリンクされているように Some images don't lightbox? - #3 by piffy

私の見解では、「リサイズとライトボックス」の設定が連動していることが問題です。

Screenshot_20240619_044925_Chrome
Screenshot_20240619_044925_Chrome1080×820 117 KB

理想的には、リサイズ設定を690x500pxのデフォルトに似たものにしたいのですが、ライトボックス設定は72x72px（大きな絵文字や「ステッカー」サイズの画像よりも大きいもの）に近づけたいです。

ライトボックスの主な目的は、スケーリングされていないバージョンの画像を表示することだと思いますが、私はそれをカルーセルスタイルのギャラリーとしてより多く使用しています。そのため、502pxの高さのものが499pxの高さのものと異なるように扱われるのは、特に同じグリッドにある場合、少し違和感があります。

「いいね！」 1
9

それが私が考えていたことを完璧に要約していると思います。ライトボックスが必要ないのは、画像が「テキストの一部」または「投稿の書式設定の一部」である場合に限られます。

「ライトボックス画像の上記のサイズ[…]」を独自の設定に分離し、デフォルト値を大幅に低くする方が、全体的により良い解決策だと思います。現在の実装とは、さらに2つの点で異なるのが理にかなっています。

  • 元の画像のサイズではなく、ページ上のサイズで判断する必要があります。
  • 片方の寸法だけでなく、両方の寸法を超える必要があるでしょう。たとえば、ページ上で690x10ピクセルの画像がライトボックス表示されるようなユースケースは想像できません。

ユースケースに関する注記として、絵文字のように小さな画像を含めることがありますが、高解像度であるため、高DPI画面でもぼやけません。たとえば、

|372x468,31px
|372x468,31px372×468 917 Bytes
! この画像はライトボックス表示されるべきではありません。なぜなら、1) 顔文字であり、さらに重要なのは2) 右下隅の小さな展開アイコンがモバイルではほとんどを覆ってしまうからです。現在、ライトボックス表示されていませんが、それは高解像度の元の画像が690x500ピクセル未満（正確には372x468ピクセル）であるためですが、ページ上のサイズが真に重要な基準であるにもかかわらず、縮小されているにもかかわらずライトボックス表示されるべきではありません。

「いいね！」 1
10

解像度が100x100ピクセル以上の画像がライトボックス表示されるようになりました。

「いいね！」 4