优化自动网格设置，少于3张图片时更便捷

贡献 功能
1

自动图片网格的最小图片数量可配置

我遇到了自动图片网格功能的一个限制。

目前，自动网格的行为似乎由站点设置中的“自动网格图片”选项控制，但编辑器插入 [grid]...[/grid] 的实际阈值仍然在前端代码中是固定的。

相关的编辑器逻辑当前使用硬编码值：

const MIN_IMAGES_TO_AUTO_GRID = 3;

因此，据我了解，管理员目前的选择如下：

管理员当前可以做的 结果
启用自动网格图片 上传 3 张或更多连续图片时，会自动包裹在 [grid]...[/grid] 中
禁用自动网格图片 不进行自动网格包裹
将阈值从 3 更改为其他数字 目前不可用作站点设置

问题在于 3 并不一定适合每个社区。

对于某些站点，自动网格很有用，但仅在用户上传较大批量的图片时才有用。例如，管理员可能希望自动网格从 5、6、10 或其他值开始，而不是在上传 3 张图片时立即触发。

这对于那些用户经常在内联说明文本中上传少量图片，但较大的图库仍应压缩为网格的社区来说尤其有用。

建议方向

我认为可以通过添加一个可配置的站点设置来改进这一点，用于在编辑器自动插入网格之前连续上传图片的最小数量。

例如：

auto_grid_images_minimum_count

例如：

设置 示例值
enable_auto_grid_images true
auto_grid_images_minimum_count 5

这样，自动网格仍然可用，但只有在达到配置的阈值时才会触发。

如果新设置的默认值为 3，则保留现有行为作为默认值，同时给予管理员更多控制权。

实验分支 / 可能的起步

我在这里创建了一个小的实验分支，以防有更多 Discourse 开发经验的人有时间分叉它、清理它或推进这个想法：

image-grid-num-setting branch

该分支并非作为完善的 PR 提供。它更多地是一个起点，展示预期的方向：

  • 添加一个新的站点设置用于自动网格的最小图片数量
  • 将该设置暴露给客户端
  • 用配置值替换编辑器上传代码中的硬编码 MIN_IMAGES_TO_AUTO_GRID = 3 检查
  • 更新管理员设置文本，使现有的自动网格文字不再暗示阈值总是 3
  • 如有需要，添加/更新前端规范

我设想的前端更改大致如下：

const minImagesToAutoGrid = Number(
  this.siteSettings.auto_grid_images_minimum_count ?? 3
);

if (
  this.siteSettings.enable_auto_grid_images &&
  this.#consecutiveImages?.length >= minImagesToAutoGrid &&
  this.textManipulation
) {
  this.textManipulation.autoGridImages([...this.#consecutiveImages]);
  this.#consecutiveImages.length = 0;
}

还有一个最近的 Discourse 风格枚举站点设置的示例在 PR #36014 中：

PR #36014 - FEATURE: adds calendar_upcoming_events_default_view setting

该 PR 是针对日历和事件插件的，而不是直接针对图片网格，所以我并不建议它影响此功能。我提到它是因为它似乎展示了这种可配置站点设置的一种有用实现模式：定义设置，将其暴露给客户端，然后通过 siteSettings 在前端读取它。

相关链接

关于关闭自动网格图片的原始讨论：

Turning off auto-grid-images?

自动图片网格公告：

Automatically apply grids to image uploads

展示站点设置架构的示例 PR：

PR #36014 - FEATURE: adds calendar_upcoming_events_default_view setting

我的实验分支：

image-grid-num-setting branch

2 个赞
2

能否具体分享一下您的经验？

您会使用什么设置，原因是什么？

3

谢谢——是的。

对于我的网站，我可能会将阈值设置为 5 张图片。

原因是很多帖子自然地包含 3 张图片，而并不真正构成“画廊”。例如，用户可能会上传：

  • 一个问题的截图
  • 显示相关设置/错误的第二张截图
  • 显示结果或对比的第三张图片

在这种情况下，自动网格适用于连续的图片，有助于防止视觉上的杂乱。

我也注意到，鼓励大量上传图片并不利于存储或备份大小，所以我并不试图推动用户发布大量图片的帖子。我的观点更多是关于在已经上传多张图片时进行布局控制。

对我来说，当帖子明显从几张解释性图片转变为更大批量的图片时，自动网格会更有用。在我的网站上，5 张图片左右感觉是一个更好的阈值。

所以我不想完全禁用自动网格。我在某些情况下喜欢这个功能。问题只是当前的固定阈值 3 对于经常使用少量图片作为解释一部分的社区来说有点过于激进。

这就是为什么我认为像 auto_grid_images_minimum_count 这样的网站设置会很有用。喜欢当前行为的网站可以将其保留为 3，而像我的网站这样的可以将其提高到 5，或 2，或其他值。

2 个赞
4

在您的具体情况下，如果改为：

  • auto-grid 默认使用“轮播”布局 或
  • 让用户更容易“取消网格”整个组

我现在又想到另一个想法……

也许值得进一步将“图片组”的概念与该组的“布局”分开。

例如，在富文本编辑器中，如果您可以在组的三种选项（列表、网格、轮播）之间切换，同时保持它们都在组内，那么在启发式算法选择的默认布局不符合用户期望的情况下，这或许能让用户或版主通过单击更轻松地选择首选布局。

5

是的，我认为这种分离是合理的。

就我的情况而言，主要问题并不在于网格的存在。问题在于当前的启发式方法在遇到连续 3 张图片时就过早地做出了布局决定，并将该决定以帖子中的 [grid]...[/grid] 标记形式暴露出来。

我同意，将“这是一组图片”与“这组图片应以列表/网格/轮播形式显示”分开，可能会形成一个更清晰的长期模型。

我觉得类似以下的方案是合理的：

  • 编辑器识别或创建图片组，即在富文本编辑器中识别，或在 Markdown 编辑器中创建。
  • 该组有一个布局选项：列表、网格或轮播——作为 BBCode 的一个参数。
  • 用户或版主可以通过一个操作更改该布局，这在 Markdown 编辑器的第二个窗格中是可行的。
  • 帖子不再依赖用户理解或仔细保留 [grid] 标签，而这正是单窗格富文本编辑器的用途所在。

这可能会比仅仅添加一个阈值设置解决更多情况，但它仍然是一个更广泛的功能。

对于我的特定站点，我认为我仍然会选择列表作为少量图片组的默认设置，因为 3 张截图通常是解释的一部分，而不是画廊。对于大批量图片，我认为网格或轮播会有用。

因此，也许有两个层面的改进：

  1. 针对当前行为的一个较小的管理员设置，例如 auto_grid_images_minimum_count，保留现有的默认值 3
  2. 稍后一个更丰富的图片组布局模型，可以更轻松地更改列表/网格/轮播，而无需手动编辑标记。不过，我认为这属于另一个功能请求主题。

虽然，如果倾向于第二个方向，那么我关于该阈值设置的初始帖子建议可能就不那么重要了，但我认为根本问题是相同的：管理员和用户需要对何时将多张图片视为画廊式块而不是正常的内联解释性图片拥有更多的控制权。

1 个赞
6

所以，是的，我认为现在我的想法是这样做：

  • 当上传的图片数量 > 1 时，用 [grid] 包裹
    • 当数量 <= 3 时，默认使用 [grid mode=list]
    • 当数量 > 3 且 <= 10 时，默认使用 [grid mode=grid]
    • 当数量 > 10 时，默认使用 [grid mode=carousel]
  • 在富文本模式和预览中，让用户可以轻松地在 list、grid 和 carousel 模式之间切换

@chapoi 和 @renato 很想听听你们对此的看法。

1 个赞
7

我不太信服。即使是 OP 截图中的例子，我也希望它们并排显示。

如果有必要，我更倾向于最初提议的设置，而不是试图搞得太“智能”。但在采取任何行动之前，我们应该等到这个功能请求获得更多投票，或者在其他地方听到同样的意见。

1 个赞