投稿にイメージグリッドを導入

[pfaffman (Jay Pfaffman)]

画像を選択すると、前後にタグが挿入されるコンポーザーツールはどうでしょうか？

[merefield (Robert)]

@Samantha_O

もう1つの将来的な機能として、グリッド内で特定の画像を選択して「強調表示」またはフィーチャー表示できるようにする機能が考えられます。これにより、他の画像よりも大きく表示されたり、何らかの方法で目立たせたりすることができます。

次のようなことができます。

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s;
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper>.lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s;
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}

[rahim123]

@pmusaraj

(つまり、画像を [grid] タグで囲んでURLを貼り付けても、コンポーザーでは機能しません。)

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

うーん、これが機能すると良いのですが。外部でホストされている画像へのリンクをユーザーに推奨しており、スペースを節約するためにホットリンクされた画像のダウンロードを無効にしました。

以下の代替案が機能するかもしれませんが、ほとんどのユーザーはMarkdownでそのようにフォーマットする方法を知りません（単に画像URLを独自の行に貼り付けることに慣れています）。

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

さらに複雑な方法で、外部画像をフルサイズのバージョンで表示できるようにクリック可能にします。

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg \"\")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg \"\")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg \"\")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]


編集： 元々は外部画像のURLを使用していましたが、Discourseはダウンロードされたホットリンクへのリンクでコードブロック内のテキストさえ置き換えます。これはバグのように思われます。コードブロックの内容には決して干渉するべきではありません。

[Paracelsus]

素晴らしい新機能です … ユーザーから、キーボードアイコンに関連付けられたキーボードショートカットダイアログポップアップのような、これらの手動手順を覚えるのに役立つマークアップチートシートのようなものはありますか、という質問がありました。

[Lilly (Lillian Louis)]

コンポーザーのツールバーに画像の配置とグリッドボタンを追加するテーマコンポーネントを作成しました。

Image Alignment and Grid

Summary Adds image grid and alignment buttons to composer toolbar Repository https://github.com/Lillinator/image-alignment Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component This theme component inserts buttons on the post composer toolbar to align uploaded images with text left or right, in center of post, …

[hello-smile6 (9pfs)]

@rahim123

Discourse はダウンロードされたホットリンクへのリンクでコードブロック内のテキストさえ置き換えますが、これはバグのように思えます。 monospace コードブロックの内容を決していじるべきではありません。

それは間違いなくバグのように聞こえます！

[thoka (Thomas Kalka)]

素晴らしい。残念ながら、メールでも公開ページでも入手できません。

[rahim123]

@hello-smile6

@rahim123

Discourseは、ダウンロードされたホットリンクへのリンクで、コードブロック内のテキストさえも置き換えます。これはバグのように感じます。単調なスペースのコードブロックの内容を決していじるべきではありません。

それは間違いなくバグのようです！

はい、別のバグレポートを提出しました。

Code block image link gets modified when hotlinked image is downloaded

It happens when using the  Markdown convention in a code block and then using the same code outside of the code block to actually display the image. It happens after about 5 minutes once Discourse downloads the hotlinked image.  [image] Original: [image]

[Canapin (Coin-coin le Canapin)]

はい、公開ページはDiscourseの機能へのアクセスが非常に制限されています。通常のライトボックスさえも機能しません。画像をクリックすると、画像ビューアを表示する代わりに直接URLが開かれます。

[cogdog (Alan Levine)]

これはエレガントに機能します！デモを行いました。

Grids of Images

もしカウントされるなら、画像配置/.gridボタンテーマコンポーネントの機能に投票します。

画像に機能があるとすれば、キャプションを追加する方法が欲しいです。私たちのコミュニティでは、画像の帰属表示を推奨していますが、これは画像の代替テキストの説明としては最適ではありません。

[jrgong]

@pmusaraj

はい、ただし [grid] タグなしではできません。タグなしで画像をグリッドに自動変換することは、CommonMark 仕様に違反するため、それを回避することを強く望んでいます。（この機能の最初の内部ドラフトでは、自動グリッドから始めました。）

少なくともコア設定でオプトインオプションとして追加し、明示的な警告を含めるのはどうでしょうか？そうすれば、フォーラム管理者は、CommonMark 仕様に違反することを知りながら、その決定を下すことができます。

よろしく
Jr

[pmusaraj (Penar Musaraj)]

ここでのご要望は理解しております（私も同様に、複数のアップロードされた写真をユーザーが何も操作しなくても自動的にグリッド表示にしたいと強く思っています）が、メンテナンスの観点からは、このオプトイン方式は現実的ではありません。私たちは数千ものDiscourseインスタンスを運用しており、同じマークアップがインスタンスによって異なって動作すると、あらゆる種類の問題を引き起こす可能性があります。残念ながら、これは維持できません。

@pmusaraj

…おそらく3つ以上の画像をアップロードした場合に、自動的に[grid]ラッパーを追加できます。

上記が、次のステップとして最善策です。（いつ実現するかは不明ですが、誰かが取り組みたいのであれば、こちらへの貢献は歓迎されます。）

[huynhthai824 (Sora &\)]

このコードを実行しましたが、エラーが発生しました。

posts = Post.where('raw LIKE ?', '%<div>data-theme-slick="1">')
posts.each do |p|
    p.update!(raw: p.raw.gsub(/<div>data-theme-slick="1">(.*?)<\/div>/m, '[grid]\1[/grid]'))
    p.rebake!
end

記号（'）を削除して再度入力しましたが、うまくいきませんでした。
エラーを見つけていただけますか？
ありがとうございます！

[Arkshine]

Soraさん、まずRailsコンソールに入力する必要があります: rails c

[huynhthai824 (Sora &\)]

すべての画像のアップロードをデフォルトで設定し、きれいにグリッド表示することはできますか？

[packman (Chris McMahon)]

これが意図された動作かどうかわかりませんが、ライトボックスの最大画像幅/高さ設定よりも小さい画像をグリッドに追加すると、サイズは縮小されますが、元のサイズに拡大する方法（*）がありません。

たとえば、11個のアップロードされた画像を含むグリッドを作成しました。8つは640x480で、ライトボックスのデフォルトの画像幅/高さ690x500よりも小さく、残りの3つは1200x372、750x521、750x509でした。最後の3つはライトボックス化されました（class=lightbox-wrapper）。最初の8つはclass=image-wrapperだったため、約300x250で表示され、元のより大きなサイズで表示するために拡大することはできませんでした。

（*）この動作は、最大画像幅/高さの設定を下げることで変更できますが、そうするとフォーラムの他のすべての画像に影響します。

グリッド内のすべての画像が自動的にライトボックス化されるか、またはメインの画像ライトボックス設定とは異なる設定を持つ方が良いと思います。

[Richie (Richie Rich)]

@thoka

美しい。残念ながら、どちらもメールでは利用できません

メールでもグリッド内の画像を再現する予定はありますか？

[pmusaraj (Penar Musaraj)]

現時点では、いいえ。正直なところ、メールでのCSSは依然として大きな頭痛の種です。メールクライアントは互いに大きく異なり、一貫した表示を得ることは非常に困難です。

[Richie (Richie Rich)]

承知いたしました。ご確認ありがとうございます

[thoka (Thomas Kalka)]

醜いですが、動作する可能性があります：グリッド用に1つの合成画像のみ送信します。

より良いユーザー体験のために、ライブサイトの該当するグリッドにリンクされる可能性があります。