此功能现已内置于 Discourse 核心中，请参阅关于 Discourse 中图片网格的公告。
此主题组件添加了一个响应式的瀑布流式图片画廊，支持自定义排序。
桌面视图：
移动视图：
点击任意图片时，它将使用默认的灯箱查看器打开。
您可以通过点击网格图标然后添加图片来添加画廊。也可以先选择已上传的图片，然后点击该图标。
→ 那么“自定义排序”具体是什么意思？
图片可以按水平（从左到右）或垂直顺序排列。水平排序最适合杂志、漫画书或类似来源的图片。此外，在灯箱视图中点击“下一张”时，会正确显示对应的图片。
下图展示了这两种排序方式的区别。右侧的图片采用了水平排序。
默认排序为水平，但可在设置中更改。您还可以通过在编辑器属性中添加 vertical/horizontal（v/h 也可）来更改特定画廊的排序方式，例如：<div data-masonry-gallery="vertical">。
→ 此组件看起来非常像 Joe 的 Tiles 图片画廊。这是克隆版吗？
我使用 Tiles 已经有一段时间了，非常喜欢它。所以，您确实可以说它深受其影响 
。但两者在许多方面有所不同，因此我决定分享此组件。以下是其中一些差异的列表：
- 无依赖项。
- 无需 jQuery。
- 支持水平排序。
- 小图片不会破坏布局。
- 编辑时预览正确。
- 添加画廊时可选择多行并包含换行符。
- 使用 API 函数
decorateCookedElement 而非 decorateCooked。
欢迎提出建议和改进！
小图片会显示在画廊中，但不会创建灯箱视图。这是 Discourse 的默认行为。不过，您可以通过修改设置 max image width（最大图片宽度）和 max image height（最大图片高度）来更改被视为“小图片”的标准。默认值分别为 690 像素和 500 像素。
此组件使用 API 版本 0.8.42。如果您自 2020 年 5 月以来未进行过更新，则需要更新才能使用它。
41 个赞
jrgong
(jrgong)
2
太棒的组件了！我一直在寻找一个瓷砖图片画廊的替代方案！
您如何看待添加一个自动画廊选项，将其应用于所有图片？基本上，每当有 3 张或更多图片且彼此之间没有其他元素时，自动启用砖墙式画廊视图。（Tiles Image Gallery 曾在他们的 auto-tiles 分支 中尝试过类似功能。）
5 个赞
谢谢！
是的，我看到了那个分支。这是一个非常有趣的功能。目前还不确定 Tiles 中的实现方式是否适用于此组件，或者是否需要其他代码。不过我一定会仔细研究一下！
3 个赞
如果您在网站上安装了 Tiles 并希望切换到 Masonry，您需要将所有旧画廊帖子的画廊 div 属性更改为 data-masonry-gallery。这样，您的旧画廊帖子才能正确渲染，同时无需同时安装这两个组件。
我想分享一下我是如何在自己的网站上进行切换的，或许能对大家有所帮助。
最直接的方法是手动编辑帖子。如果您的帖子数量不多，这种方法可行，但逐一查找每篇帖子可能仍然很麻烦。不过别担心，数据探索器插件 可以帮您解决问题！运行以下 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 个赞
那个功能差不多完成了。我已经修改了 Tiles 的代码，只需要再做一些测试（针对不同场景/站点修改）。我会尽量找时间尽快完成，预计一周内可以添加。要是时间能再多一点就好了 
。
5 个赞
非常感谢你创建了一个如此出色的 TC。
现在我可以完全替换有问题的“Tiles Image Gallery”TC 了。
@Heddson
只是好奇，你是否有计划创建一个类似的 TC 来替换"Slick Image Gallery"呢？
"Slick Image Gallery"也存在与"Tiles Image Gallery"类似的问题，例如小图片会破坏布局、预览无法正确显示画廊等。
3 个赞
我目前没有任何这样的计划。也许以后如果有时间的话会考虑。如果只是一个小的修复，我或许可以提交一个拉取请求。
1 个赞
我刚刚为组件添加了自动画廊功能。更新后，您可以在设置中启用它。
您可以指定分类，并设置自动创建画廊所需的最小图片数量（图片之间不能有任何其他元素或空行）。
4 个赞
只是想说说，这个开箱即用，效果完美。之前另外两个提到的组件一直有问题，所以这个太棒了。
2 个赞
听到这个消息太好了！
我还为网格样式添加了 div 属性 grid（或 g）（尽管组件名称是 
），它会将每一行的高度设置为固定值（即该行中最高的图片高度）。如果您的图片高度几乎相同，这会很有用。
jrgong
(jrgong)
18
@Heddson
我们目前正在测试 2.8 稳定版。当定义了特定类别时，“自动启用类别”功能不会触发。我们尝试添加类别 slug 和类别 ID。当“自动启用类别”留空时，它会起作用。
嗯，这很奇怪。在我的 2.9.0.beta1 版本上可以正常工作，这与 2.8 稳定版几乎相同。应该添加的是类别名称。但我会看看是否能找到什么。
感谢提供信息！
2 个赞
