pmusaraj
2023 年 6 月 19 日午後 6:46
1
Discourse の投稿に画像が多数ある場合、それらを自動的にグリッドに配置できるようになりました。[grid] と [/grid] タグで囲むだけで、画像が整然と配置されます。これは このコミット からのコア機能であり、すべての Discourse インスタンスで有効になっています。
以下に実際の例を示します。
この機能は、いくつかのテーマコンポーネント（https://meta.discourse.org/t/masonry-image-gallery/188315 , https://meta.discourse.org/t/tiles-image-gallery/81950 ）に似ています。主な違いは、グリッド内の画像の配置が要素の上部と下部の両方に揃うことです。その他の技術的な注意点：
モバイルでは、グリッドはデフォルトで2列、デスクトップでは3列になります。
グリッドにちょうど4つのアイテムがある場合、画像は2列に配置されます。
画像以外の要素（動画など）も使用できますが、結果は完全に揃わない場合があります。
グリッド内のアイテムは、列の高さをできるだけ近くなるように配置されるため、画像の順序が常に維持されるとは限りません。
グリッドの有効化または無効化は、コンポーザープレビューで画像のグループの隣にある小さなトグルアイコンをクリックすることでも実行できます。
この投稿で使用されている画像は unsplash.com から提供されています
「いいね！」 81
Lilly
2023 年 6 月 20 日午前 3:35
2
素晴らしいです。気に入りました。@pmusaraj さん、ありがとうございます
「いいね！」 6
bartv
2023 年 6 月 21 日午前 6:58
3
既存のMasonry Image Galleryは利用していますが、この新機能は互換性がありますか、それとも既存のグリッドは消えてしまいますか？
「いいね！」 6
pmusaraj
2023 年 6 月 21 日午後 1:41
4
良い質問ですね。この新しいコア機能は、Masonry Image Gallery テーマコンポーネントと互換性がありません。つまり、両方を同時に機能させることはできません。
Masonry ギャラリーアプローチから新しいコアアプローチに投稿を移行したい場合は、投稿の raw コンテンツを以下のように更新するスクリプトを実行する必要があります。
<div data-masonry-gallery>
</div>
から
[grid]
[/grid]
その後、それらの投稿を再ベイクする必要があります。
「いいね！」 6
素晴らしい！これは大きな進歩で、投稿の画像がさらに見栄えが良くなります。
これは、サムネイルのプライマリ画像として何が選択されるかに影響しないと推測しますが、どうでしょうか？
「いいね！」 6
pmusaraj
2023 年 6 月 21 日午後 1:49
6
はい、その通りです。影響はないはずです。投稿内で最初に見つかった画像がサムネイルとして選択される（アバターや絵文字などを除く）と認識しています。また、最初にアップロードされた画像がグリッドの最初の画像にならないというシナリオは考えられません（並べ替えはリストの後続の画像に対してのみ可能です）。
「いいね！」 6
pfaffman
2023 年 6 月 21 日午後 7:43
7
インポートした画像が次のようなS3バケットへのURLになっています。
[grid]
https://urlsite/pic.jpg
https://urlsite/pic.jpg
[/grid]
しかし、表示されるのは [grid]、画像、そして [/grid] だけです。
「いいね！」 7
pmusaraj
2023 年 6 月 21 日午後 7:52
8
うーん、はい、コンポーザーでは現在、アップロードのみで機能します。（つまり、画像のURLを貼り付けて [grid] タグで囲んでも、コンポーザーでは機能しません。）
「いいね！」 8
pfaffman
2023 年 6 月 21 日午後 8:05
9
クール。まだそのコードをインポートスクリプトに追加しなくてよかった。
「いいね！」 5
これは素晴らしい機能ですね、ありがとうございます。
グリッドは「公開済みページ」でも機能しますか？
「いいね！」 1
pmusaraj
2023 年 6 月 22 日午前 2:35
11
残念ながら、公開済みのページでは動作しません。同様に、JavaScript を使用した投稿機能（ライトボックス、投票、目次など）も公開済みのページでは動作しません。
「いいね！」 3
Canapin
2023 年 6 月 22 日午前 8:11
13
こんにちは、バート
これで動作するはずです。明らかに、バックアップを取り、以前のメーソンリー投稿で不要な結果がないか注意深く確認してください…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery</div>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery</div>(.*?<\/div>)/m, '[grid]\1[/grid]'))
p.rebake!
end
「いいね！」 7
Don
2023 年 6 月 22 日午前 8:51
15
素晴らしいです。ありがとうございます:slightly_smiling_face:
私も Masonry Image Gallery コンポーネントを使用しています…
自動有効設定で… これには生の <div> data-masonry-gallery</div> が含まれていないため、スクリプトは機能しないと思います。しかし、この場合は互いに競合しません。
グリッドを自動化する予定はありますか？ これが実現すれば、投稿をリベイクしてグリッドレイアウトを維持できます。それまでは、グリッドボタンを非表示にしてテーマコンポーネントを安全に使用できると思います。
「いいね！」 4
CDCK の誰か、Chrome 開発者に影響力のある人はいますか？ Grid の CSS Masonry サポートについてです。
Masonry はすでに CSS の機能であるべきです。画像のコレクション（あるいはあらゆるコンテンツアイテム）の異なるアスペクト比をうまく尊重できる数少ないレイアウトの 1 つです。
これをどこでも JavaScript で実行するのは、非常に無駄で無意味です…
（ご存知のように、Firefox ではすでに可能であり（フラグの後ろ）、Safari のテクニカルプレビューにも搭載されています: "masonry）" | Can I use... Support tables for HTML5, CSS3, etc
ちなみに、皆さん、このイシューに
https://bugs.chromium.org/p/chromium/issues/detail?id=1076027&q=masonry&can=2
「いいね！」 4
pmusaraj
2023 年 6 月 22 日午後 2:34
20
私の知る限りではありません。
Safariがメーソンリーをサポートすることに興奮しています。彼らはドラフトから実験的、そして完全にサポートされている機能への移行においてより良い実績を持っています。Firefoxのメーソンリーサポートは2年以上フラグの後ろにあります。Safariのサポートが、Chromeが追いつくための主な推進力になるでしょう。
完了しました！
「いいね！」 4
pmusaraj
2023 年 6 月 22 日午後 3:43
23
Don:
グリッドを自動化する予定はありますか？
はい、ただし [grid] タグなしではありません。タグなしで画像を自動的にグリッドに変換することは、CommonMark 仕様に違反するため、それを回避したいと考えています。（この機能の最初の内部ドラフトでは、自動グリッドから始めました。）
代わりに、次に考えているのは、複数の画像（おそらく3つ以上）のアップロードに [grid] ラッパーを自動的に追加できるようにすることです。これは、特にモバイルでのアップロードに役立ちます。モバイルで手動でタグを追加するのは面倒であり、携帯電話から一度に3つ以上の画像をアップロードしている場合、それらは写真であり、グリッドレイアウトに適している可能性が高いです。
いつ追加するかの計画はまだありませんが、ぜひ実現したいと考えています。
「いいね！」 9
JavaScriptから静的HTMLを生成し、「調理済み」DOMを公開することで、このグリッドや目次などの便利な機能を多数有効にすることが可能になるはずです。
「いいね！」 1
pmusaraj
2023 年 6 月 22 日午後 6:02
27
調理済みのHTMLだけでは不十分です。グリッド、目次、および同様の機能には、その機能を作成するためにHTMLと対話するJSも必要です。そして、そのJSはEmberアプリ内に存在し、Ember以外の公開ページ用に簡単に抽出することはできません。
「いいね！」 2
昨日、これを試してみて、このスレッドでフィードバックと感想を共有するように勧められました…
グリッドを自動で設定してくれる「オートマチック」なところが気に入っています。
画像をリスト内でコピー＆ペーストして並べ替える必要なく、画像を表示する順序を変更できる機能が追加されると良いかもしれません。例えば、各画像の先頭に番号を追加するなどです。
プレビューで簡単にグリッドをオフにできるのは良いのですが、再度表示するにはコードを再追加する必要があります。複数の画像を追加した場合にグリッドアイコンが表示され、必要に応じてオン/オフを切り替えられるようになると、より良い体験になるでしょう。
最後の将来的な機能として、グリッド内で特定の画像を選択して「ハイライト」または「フィーチャー」表示させ、他の画像よりも大きく表示したり、何らかの方法で目立たせたりする機能があると良いかもしれません。
全体として、画像が投稿を占有することなく複数の画像を追加できる素晴らしい新しいオプションです
「いいね！」 5
をお願いします:
Chrome と Edge にも CSS Masonry サポートを！