この機能は現在 Discourse コアに組み込まれています。画像グリッドに関する お知らせ をご覧ください。
このテーマコンポーネントは、カスタマイズ可能な順序設定が可能なレスポンシブなマストンスタイルの画像ギャラリーを追加します。
デスクトップ表示：
モバイル表示：
画像をクリックすると、デフォルトのライトボックスビューアで開きます。
ギャラリーを追加するには、グリッドアイコンをクリックして画像を追加します。また、アップロードした画像を先に選択してからアイコンをクリックしても機能します。
→ 「カスタマイズ可能な順序」とはどういう意味ですか？
画像は水平（左から右）または垂直に順序付けることができます。水平順序は、雑誌や漫画などの画像に最適です。また、ライトボックス表示で「次へ」を押すと、正しい画像が表示されます。
以下の画像がその違いを示しています。右側の画像は水平順序になっています。
デフォルトの順序は水平ですが、設定で変更できます。また、コンポーザー内の属性に vertical/horizontal（v/h でも可）を追加することで、特定のギャラリーの順序を変更することも可能です。例：<div data-masonry-gallery="vertical">
→ このコンポーネントは Joe の Tiles 画像ギャラリー と非常に似ています。これはクローンですか？それとも何ですか？
私は Tiles をしばらく使用しており、非常に気に入っています。なので、確かにその影響を強く受けていると言えるでしょう 
。ただし、多くの点が異なっているため、共有することにしました。以下に、いくつかの違いをリストアップします。
- 依存関係なし。
- jQuery なし。
- 水平順序。
- 小さな画像がレイアウトを崩さない。
- 編集時の正しいプレビュー。
- ギャラリー追加時に改行を含めて複数の行を選択可能。
- decorateCookedElement API 関数を使用し、decorateCooked は使用しない。
ご提案や改善案を歓迎します！
小さな画像はギャラリーに表示されますが、ライトボックスビューは作成されません。これは Discourse のデフォルトの動作です。ただし、max image width と max image height の設定を変更することで、「小さな画像」と見なされる基準を変更できます。デフォルト値はそれぞれ 690 px と 500 px です。
このコンポーネントは API バージョン 0.8.42 を使用しています。2020 年 5 月以降に更新していない場合は、使用するために更新が必要です。
「いいね！」 41
jrgong
(jrgong)
2
素晴らしいコンポーネントですね。tiles 画像ギャラリーの代替品を探していたんです！
すべての画像に自動的に適用する「自動ギャラリー」オプションを追加することについて、どうお考えですか？具体的には、他の要素を挟まずに 3 枚以上の画像が連続している場合、自動的にマストンギャラリービューが有効になるような仕組みです。（Tiles Image Gallery は、auto-tiles ブランチで同様の試みを行っていました。）
「いいね！」 5
ありがとうございます！
ええ、そのブランチは見ています。とても興味深い機能ですね。Tiles で実装されている方法がこのコンポーネントでも機能するかどうか、あるいは他のコードが必要かどうかはわかりません。しかし、必ず確認します！
「いいね！」 3
サイトに Tiles がインストールされており、Masonry に切り替えたい場合は、すべての古いギャラリー投稿のギャラリー div の属性を data-masonry-gallery に変更する必要があります。これは、古いギャラリー投稿が正しく表示され続けつつ、両方のコンポーネントをインストールしたくない場合の話です。
私が自身のサイトで切り替えを行ったので、その方法を共有しようと思います。誰かの参考になれば幸いです。
最も簡単な方法は、投稿を手動で編集することです。変更が必要な投稿数が多くなければこれで問題ありませんが、すべての投稿を見つけるのが大変な場合もあります。でもご安心ください、Data Explorer が救済策になります！以下の SQL を実行すれば、必要なものが正確に取得できます。
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
手動で編集するには多すぎる場合は、rake を使ってすべての文字列を置換することもできます。そのためには、サーバーに SSH で接続し、以下のコマンドを実行します。
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
この解決策については、こちらの投稿 で詳しく読むことができます。ただし、rake posts:remap コマンドに関する以下の注意書きにご注意ください。
他にも方法があるかもしれません。例えば、好みに応じてコンポーネントのコードを変更し、両方の属性を検索するようにすることも可能です。
「いいね！」 5
bartv
(Bart )
6
これは素晴らしいアイデアで、はるかにユーザーフレンドリーですね！この機能の実装に関する予定はありますか？
「いいね！」 3
その機能はほぼ完成しています。Tiles のコードを修正したので、あとはいくつかのテスト（異なるシナリオやサイト変更に対応したテスト）を行うだけです。近日中に時間を見つけて実施するつもりですが、1 週間以内には追加されるはずです。時間がもっとあればいいのに 
。
「いいね！」 5
lhkjacky
(Jacky)
9
TC を素晴らしいものにしていただき、本当にありがとうございます。 
これで、問題のある「Tiles Image Gallery」TC を完全に置き換えることができます。 
@Heddson
ちょっと気になったのですが、「 Slick Image Gallery」を置き換えるような同様の TC を作成するおつもりはありますか？ 
「Slick Image Gallery」も「Tiles Image Gallery」と同様の問題を抱えています。例えば、小さな画像でレイアウトが崩れる、プレビューがギャラリーを正しくスライドできないなどです。
「いいね！」 3
現時点ではその予定はありません。時間ができたら将来的にやるかもしれません。小さな修正であれば、プルリクエストを送ることもできるかもしれません。
「いいね！」 1
bartv
(Bart )
11
こんにちは、「自動モード」に取り組む時間がありますか？
コンポーネントに自動ギャラリー機能を追加しました。アップデート後、設定から有効にできます。
カテゴリを指定したり、ギャラリーが自動的に作成されるために必要な最小画像数を設定したりすることも可能です（画像間に他の要素や空行がない場合）。
「いいね！」 4
すぐに使える状態で完璧に動作することをお伝えしたかっただけです。他の2つのコンポーネントでは問題があったので、これは本当に素晴らしいです。
「いいね！」 2
それは素晴らしいですね！
また、コンポーネントの名前とは裏腹に（
）、グリッドスタイル用の div 属性 grid（または g）を追加しました。これは、各行を最も高い画像の高さに合わせて固定します。画像の高さがほぼ同じ場合に便利です。
jrgong
(jrgong)
18
@Heddson
現在、2.8安定版をテスト中です。特定のカテゴリが定義されている場合、auto enabled categories機能がトリガーされません。カテゴリのスラッグとカテゴリIDを追加しようとしました。auto enabled categoriesが空のままの場合、機能します。
それは奇妙ですね。私の 2.9.0.beta1 では動作しますが、これは 2.8 安定版とほぼ同じです。追加されるべきはカテゴリ名です。しかし、何か見つけられるか見てみます。
情報ありがとうございます！
「いいね！」 2
jrgong
(jrgong)
20
気にしないで、チェックボックスの設定を忘れていました:man_facepalming:
「いいね！」 2
