在帖子中引入图片网格

公告
31

也许有一个作曲家工具，您可以选择图像，它会在之前和之后插入标签？

4 个赞
32

你可以这样做：

.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);
  }
}
3 个赞
33 
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

5120×2880 620 KB

3840×2160 1.1 MB

1920×1200 315 KB

嗯，如果这个能用就好了。我鼓励用户链接到他们托管在其他地方的外部图像，并且我禁用了下载热链接图像以节省空间。

以下替代方法可能有效，但大多数用户不知道如何在 Markdown 中进行格式化（他们习惯于在单独一行上粘贴图像 URL）：

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

5120×2880 620 KB

3840×2160 1.1 MB

1920×1200 315 KB

这是一个更复杂的方法，可以让外部图像可点击以查看完整尺寸版本：

[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 会将代码块内的文本替换为指向已下载热链接的链接，这似乎是一个错误。它 永远不应该 弄乱等宽代码块的内容。

3 个赞
34

很棒的新功能 :clap:… 我们的一位用户询问是否有一种标记备忘单可以帮助人们记住这些手动过程，有点像与键盘图标关联的键盘快捷键对话框弹出窗口。

7 个赞
35

我刚刚创建了一个主题组件，它在编辑器工具栏中添加了图像对齐和网格按钮

10 个赞
36

这听起来确实像一个 bug！

1 个赞
37

:yum: 优美的。不幸的是，电子邮件或已发布的页面均无法提供。:cry:

2 个赞
38

是的，我已提交单独的 bug 报告：

2 个赞
39

是的，已发布的页面对 Discourse 功能的访问受到严格限制。即使是常规的灯箱也无法在它们上面工作。点击图片将直接打开 URL，而不是显示图片查看器。

4 个赞
40

这效果很棒！我刚做了一个演示

如果算的话，我会投票支持拥有图像对齐/.grid 按钮主题组件的功能。
如果有一个图像功能我希望拥有的话，那就是添加说明的方法。在我们社区，我提倡为图像注明出处，而这并非图像描述的最佳用途。

8 个赞
41

是否至少将其作为核心设置中的一个可选选项添加，并包含明确的警告？这样论坛管理员就可以自行决定是否要这样做，并且知道他们违反了 CommonMark 规范。

此致
Jr

1 个赞
42

我理解您的想法（我也有同样的想法，我希望用户无需任何操作，就能自动将上传的多张照片排列成网格），但从维护的角度来看，这种选择加入的选项是不可行的。我们运行着数千个 Discourse 实例，如果相同的标记在某些实例中表现不同而在其他实例中表现正常，可能会引起各种麻烦。遗憾的是，这无法维护。

这上面是我们下一步的最佳选择。（不确定何时会发生，但如果有人想解决这个问题，非常欢迎贡献。）

8 个赞
43

我运行了这段代码

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

但是出现了错误

image
image1592×376 106 KB

我删除了符号（并重新输入，但没有成功）
你能找到错误吗？
谢谢！

3 个赞
44

你好 Sora，你首先需要进入 Rails 控制台：rails c

3 个赞
45

我们可以设置默认所有图片上传后自动排列成一个漂亮的网格吗？

5 个赞
46

我不确定这是否是预期行为，但如果您将小于灯箱最大图像宽度/高度设置的图像添加到网格中，它们将以缩小尺寸显示，但无法 (*) 将它们扩展到原始尺寸。

例如，我创建了一个包含 11 张上传图像的网格。八张是 640x480，低于灯箱默认的 690x500 图像宽度/高度，另外三张是 1200x372、750x521 和 750x509。最后三张是灯箱化的（class=lightbox-wrapper）。前八张是 class=image-wrapper，因此仅显示为大约 300x250，并且无法扩展以查看它们的原始较大尺寸。

(*) 通过减小最大图像宽度/高度设置可以改变这种行为，但这会影响论坛中所有其他图像。

我认为更好的做法是自动对网格中的所有图像进行灯箱化，或者提供与主图像灯箱设置不同的设置。

3 个赞
47

有什么计划将网格中的图片也复制到电子邮件中吗？

3 个赞
48

目前还没有，老实说，电子邮件中的 CSS 仍然是一个主要的难题。电子邮件客户端之间差异很大，很难获得一致的渲染效果。

5 个赞
49

完全理解，感谢您的确认 :slight_smile:

3 个赞
50

丑陋，但可能有效：只发送一张合成的网格图像。

为了增强用户体验，可以将其链接到实时网站上的相应网格。

1 个赞