タイル画像ギャラリー

ライトボックス表示の最小サイズを縮小することにしました。それを利用していた人のかなりの部分が、400 x 300 ピクセルより少し小さいか、ちょうどそのサイズを使用していたようでした。それはうまく機能しました。

「いいね!」 1

@Heather_Dudley それはどのように実現されたのですか?
管理設定では、サイズを変更するためのそのようなライトボックスオプションが見つかりませんでした。

「最大画像サイズ」と「最大画像高さ」です。これらを検索すれば両方見つかります。その制限を超える画像はすべてライトボックス表示されます。

みなさん、こんにちは

画像が投稿の「ボックス」の外に表示される問題が、まだ他の人も起きているでしょうか?
例としてこちらをご覧ください。一部の画像が右側にずれて見えなくなっています。

こんにちは、Discourse は初心者で、利用可能な画像ギャラリーを探しています。現在は vBulletin フォーラムで PhotoPost Gallery を使用しています。PhotoPost から Tiles へインポートするためのインポーターはありますか?調べてみましたが、以下の情報しか見つかりませんでした。もし私の記憶が正しければ、以前のスレッドで出た結論は「トピックとしてインポートする」というものでした。これは今でも正しい方法でしょうか?

コンポーネントをありがとうございます。

動作は問題ないのですが、あなたの例のように「静的プレビュー」が表示されません。

左側のラインで写真が強調表示されますが、サイズ変更はされていません。

「いいね!」 2

上記の投稿をすべて読みましたが、多くのユーザーが私と同じ問題に直面していることがわかりました。

Titles Image Gallery」と「Slick Image Gallery」の両方とも、ユーザーがサイトの設定「Max image width & height」よりも小さい画像をギャラリーに使用すると、投稿のレイアウトが崩れてしまいます。Discourse は小さな画像に対して「lightbox」を生成しないことは理解しています。そのため、これらの小さな画像をクリックして拡大できないことについては文句を言うつもりはありません。

しかし、すべてのフォーラムメンバーにサイトの設定「Max image width & height」の値よりも大きい画像をアップロードさせることは不可能です。ほとんどのフォーラムメンバーは「ピクセル」とは何なのかを理解しておらず、画像のサイズを確認する方法も知りません。彼らは他のソーシャルメディアにアップロードするのと同じように、手元にある画像をそのままアップロードするだけです。

例を挙げると、サイトの「Max image」設定が幅と高さともに 690px に設定されている場合、ユーザーが 680x680px の画像を 4 枚ギャラリーにアップロードすると、投稿内に大きな空白スペースが表示されてしまいます(680 x 2720px)。


すべての画像サイズに対応するギャラリーの機能実装には時間がかかることは理解しています。しかし現時点では、少なくとも投稿のレイアウトを崩さないよう、サイズが設定値から外れた画像をギャラリーで非表示にする方がよいと考えます。レイアウトが崩れるとユーザーに悪い印象を与えてしまうからです。私個人の意見ですが。:thinking:

「いいね!」 3

スマートフォンで表示すると、3 番目の画像が表示されません。

画像は合計 4 枚あり、PC ではすべて表示できます。

しかし、スマートフォンで表示すると 3 番目の画像が欠落しています。

ブラウザのインスペクタで確認すると、3 番目の画像は「tiles-col–3」の下に配置されていますが、これは小さな画面では起こるべきではありません。

なぜなら、CSS が小さな画面で「tiles-col–3」を非表示(display:none)にしており、それにより 3 列目の画像が表示されなくなっているためです。

この TC を提供してくださり、ありがとうございます。私が現在取り組んでいるプロジェクトに非常に良く合っています。素晴らしい仕事ですね。:clap:

画像が最大サイズより小さい場合、なぜ表示されないのでしょうか?

私は @lhkjacky が説明しているのと同じ問題に直面しています。

@Heddson さん、Tiles Image Gallery の問題を修正する新しい TC を作成してくださり、ありがとうございます。:smiling_face_with_three_hearts:

Masonry Image Gallery:

「Tiles Image Gallery」を「Masonry Image Gallery」に置き換えました。
これで、ギャラリーに小さな画像を追加しても投稿のレイアウトが崩れなくなります。:partying_face:

「いいね!」 2

TileとSlickの両方を数年間使用しており、コミュニティも両方気に入っています!:+1:

最近フォーラムをDiscourse 3.0にアップデートしたところ、どちらも少し調子が悪くなり始めました。デフォルトのテーマに基本的なCSSカスタマイズを使用しており、アップデート後にのみ発生し始めたため、私たちの特定のセットアップからの問題だとは思いません。

Slickの問題は、いくつかの追加の画像がスライドショーの外側に表示され、その下にクリック可能なドットの複数の行が表示されることです。これはそれをよりよく説明するはずです:

グリッドの方ですが、グリッドの右側に画像のスライスがわずかに表示されるという奇妙な点があります:

モバイルでは、スライスされた画像は幅が広くなりますが、それでもスライスされています:

この問題が発生しているライブフォーラムへのリンクはPMでお送りできます。

他にこの問題が発生している方はいらっしゃいますか?

Discourse 3.0.1 beta2 を使用しています。

プレビューには静的プレビューが表示されません。

しかし、投稿には8枚の画像が正しく表示されます。

ギャラリーには何枚の画像がありますか?幅/高さの比率がおかしい画像はありますか?

問題はまさに画像の数にあります。ギャラリーに画像 箇条書き を表示するスペース以上の画像が含まれている場合、Discourse 3.0 以降、奇妙な方法で壊れるようです。

以下は、すべて正常に機能し、箇条書き が画像の真下に表示される上限です。

さらに画像が 1 枚追加されただけの同じギャラリーは以下のようになります。

すべての 箇条書き が上に移動し、写真の上に表示されます。黒い背景では見えにくいですが、少なくとも左側に 1 つ見えます(ホバーするとより目立つようになります)。追加の箇条書きが下部に表示されています。
以前は、大量の画像があった場合、箇条書き はギャラリーの の行に積み重ねられていました。


関連する可能性のある、いくつかの(こちらも大きな)ギャラリーは、すべてではありませんが、Discourse 3.0 へのアップデート後に少し壊れています。

これが箇条書きのずれによるものかどうかは不明です。HTML を見ると、ul.slick-listbutton.slick-next.slick-arrow の間に、その 2 つの失われた画像とともに数十個の <br> があります。

「いいね!」 1

Googleフォトのように画像を自動でCSS配置できますか?

このテーマコンポーネントは非推奨になりました。こちらで紹介されている新しい組み込み機能を使用してください。

「いいね!」 4

このテーマコンポーネントのサポート終了日はありますか?新しい機能への切り替えを優先しようとしています。

このコンポーネントはすでに壊れているのではないでしょうか?あなたのサイトではまだ正常に動作していますか?

[管理者通知] ディスコースのコアの変更に対応するため、テーマまたはプラグインのいずれかのアップデートが必要です。(id:discourse.fontawesome-6-upgrade) 特定されたテーマ: ‘Tiles - Gallery Component’

「いいね!」 1

それは非推奨のコンポーネントですが。

「いいね!」 2