修复由 WP Discourse 和 RSS 插件创建的帖子中的损坏图片

simon · 2020 年8 月 13 日 18:20

存在一种情况，通过 WP Discourse 和 RSS 插件发布到 Discourse 的图片可能会损坏。当使用 WP Discourse 插件将完整帖子内容发布到 Discourse，且发布帖子时使用的是 WordPress 经典编辑器时，可能会出现此问题。此外，当通过 RSS 轮询将帖子拉取到 Discourse，且未启用“截断嵌入帖子”嵌入设置时，也可能发生此问题。

该问题发生在 Discourse 尝试下载已添加到帖子中的图片时。如果下载远程图片导致生成的 Markdown 图片标签被 HTML 标签包裹，图片将无法正常显示。

如果帖子是从 WordPress 发布的，解决方法是将发布方式从经典编辑器切换为区块编辑器。如果无法切换，或者切换后问题仍未解决，一种变通方法是阻止 Discourse 下载远程图片。

如果您知道远程图片发布的域名，可以通过将这些域名添加到“禁用图片下载域名”站点设置中，来阻止 Discourse 下载这些图片：

如果您不确定所有使用的域名，可以通过禁用“下载远程图片到本地”来阻止 Discourse 下载所有远程图片。请注意，禁用此设置可能导致您网站上的图片损坏。如果可能，最好仅阻止下载您可控的特定域名的远程图片。

maiki · 2020 年8 月 13 日 21:23

能否请您提供更多相关细节？我所有的站点都使用经典编辑器，但极少有站点使用插件将 Markdown 作为输入进行渲染（Markdown 解析器插件领域已趋于沉寂，因此大家大多转向 Jetpack）。

这种情况是否指在经典编辑器之上使用了 Markdown 解析器？

simon · 2020 年8 月 13 日 21:37

该问题发生在以下形式的 HTML 被发布到 Discourse 时。这种情况最有可能通过 API 向 Discourse 发布主题时出现：

<p><img src="remote-image-domain/..."/></p>

任何包裹在图片标签外层的标签都会导致此问题，例如 <figure><img src="remote-image-domain/..."/></figure>。

当 Discourse 尝试下载远程图片时，针对第一个示例会生成如下 Markdown：

<p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>

这将导致图片无法显示。可以通过手动编辑 Discourse 帖子将其修复为：

<p>

![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
</p>

但更简单的解决方法是通过站点设置 disabled image download domains 禁止 Discourse 下载远程图片。

对于通过 WP Discourse 插件配合区块编辑器（Block Editor）发布的帖子，插件会在发布到 Discourse 之前尝试通过以下代码处理帖子以解决此问题：

github.com/discourse/wp-discourse

lib/template-functions.php

main


      
          	/**
          	 * Extracts image src from HTML and returns an image tag for each image.
          	 *
          	 * This function is used when full post content is published to Discourse. Its purpose is to remove the surrounding
          	 * <figure> tags from images. Unless that is done, images will break when they are downloaded by Discourse.
          	 *
          	 * @param string $html The HTML to extract the image URL from.
          	 *
          	 * @return string
          	 */
          	protected function extract_images_from_html( $html ) {
          		if ( ! extension_loaded( 'libxml' ) ) {
          
          			return $html;
          		}
          
          		$use_internal_errors   = libxml_use_internal_errors( true );
          		$disable_entity_loader = $this->libxml_disable_entity_loader( true );
          		$doc                   = $this->create_dom_document( $html );
          		$finder                = new \DOMXPath( $doc );

This file has been truncated. show original

或许可以为经典编辑器（Classic Editor）实施类似的修复方案，但由于经典编辑器中无法使用 WordPress 的 parse_blocks 函数，修复方案会更加复杂。我希望最终可以通过对 Discourse 核心代码的修改来解决此问题。

maiki · 2020 年8 月 14 日 18:53

非常感谢，Simon！我理解这个问题了，解释得很棒。

Don · 2020 年10 月 25 日 14:05

你好，Simon，

感谢你开发 WP Discourse。

我也遇到了图片相关的问题。我使用它来本地下载图片，结果正如你上面解释的那样，导致图片无法显示。之后，我将 WordPress 的 HTML 转换为 Markdown，然后手动粘贴到 Discourse 中。虽然这样能正常工作，但需要手动操作。

是否有可能集成一个转换器，以便在从 WordPress 导出时自动完成转换呢？

谢谢！

simon · 2020 年11 月 2 日 19:07

如果您使用 WordPress 区块编辑器发布帖子，转换应会自动进行。如果您使用的是经典编辑器，则需要在 Discourse 上手动修复 HTML，以防止图片损坏。

如果您使用的是区块编辑器但仍遇到图片损坏的问题，请告诉我。

为使用经典编辑器发布的帖子添加类似功能也是可能的，但所需的代码实现会比区块编辑器的方案更复杂。

Don · 2020 年11 月 2 日 19:11

我正在使用区块编辑器（Gutenberg），但其中安装了一些第三方插件。这可能是导致图片显示异常的原因。我在 WordPress 上也使用了一些第三方图库插件。

simon · 2020 年11 月 2 日 19:18

图库插件可能是导致该问题的原因。WP Discourse 插件在将帖子内容发布到 Discourse 之前，会查找帖子中 blockName 设置为 core/image 或 core/gallery 的任何 blocks。这些块中图片的 HTML 会被重写为 Discourse 可解析的格式。

看来您网站上使用的图片插件可能采用了未被处理的块名称。请问您使用的是哪个图库插件？

Don · 2020 年11 月 2 日 19:28

我明白了……我一直在使用这个插件，但刚刚才发现它已经不再受支持了。所以我想我会把图片转换回默认图库，然后尝试更新 Discourse 主题。这应该就是问题所在，对此非常抱歉。

Canapin · 2020 年11 月 16 日 20:05

我已经切换到了区块编辑器（毕竟经典编辑器的支持将于明年结束，迟早要做的），但这并没有解决问题。这些图片是托管在 Facebook 上的。

simon · 2020 年11 月 17 日 00:21

您能否通过在侧边栏中选择“代码编辑器”来检查 WordPress 帖子中的图片标记？我想知道的是，这些图片位于哪种区块中（如果有的话）：

WordPress 插件使用区块名称来解析图片。如果图片不在插件当前处理的区块中，其标记将不会被清理。

Canapin · 2020 年11 月 17 日 00:32

这篇 WP 帖子是从 Facebook 复制粘贴的，这里是一份 HTML 代码示例。
其中的图片是表情符号：

<div dir="auto"><span class="pq6dq46d tbxw36s4 knj5qynh kvgmc6g5 ditlmg2l oygrvhab nvdbi5me sf5mxxl7 gl3lb2sf hhz5lgdu"><img src="https://static.xx.fbcdn.net/images/emoji.php/v9/t34/1/16/1f914.png" alt="🤔" width="16" height="16"></span>评论？您有一个月的时间向我们提交您最精彩的诗歌和/或关于独轮车主题的画作，包括它带给您的联想、您对该运动的热情等。</div>

我在区块编辑器中没有和您一样的侧边栏，因此我使用此选项显示了区块的 HTML 内容：

如果问题是因为这不是“常规”的 WP 内容，而是 HTML 复制粘贴导致的，那倒不是问题。我会告诉我的用户避免复制粘贴图片，即使是表情符号。

simon · 2020 年11 月 17 日 00:42

是的，我认为问题在于 HTML 被复制到了 WordPress 帖子中。WP Discourse 插件应该能够处理通过图像块添加的图片。它并未配置为修复以其他方式添加的图片的 HTML。

理想情况下，Discourse 应该能够处理被其他 HTML 标签包裹的 HTML 图像标签，但这是一个棘手的问题。也许 WP Discourse 插件可以更新以支持在图像块之外添加的图片。我原本希望处理图像块就能覆盖大多数情况，但似乎有很多例外。

bobbysmith · 2021 年1 月 19 日 20:38

你好，

我已经阅读了关于此主题以及另一个主要讨论图片的帖子。

将我从网站发布的摘要发布到 Discourse 完全正常。但是，当我点击“显示完整帖子”按钮时，似乎陷入了加载循环，永远无法加载完整帖子（或者执行任何其他操作）。

如果我尝试将完整帖子发布到 Discourse，也能工作，但存在一些异常：

图片无法加载（这也是我发现这些帖子的原因）；
它会加载完整帖子（我的每个帖子内容中包含多个按钮/链接，可能会让插件感到困惑），但不知何故，它还会在完整帖子的末尾加载一个格式完美的帖子摘要。换句话说，它会加载完整帖子（不包括图片），然后在帖子底部再次加载该帖子的另一个摘要。

有一点需要注意：我的 WordPress 网站处于暂存模式，并且未使用 HTTPS。而我的 Discourse 网站使用的是 HTTPS。我曾以为加载完整帖子的问题可能与暂存网站有关，但其他功能似乎都能正常工作（例如，强制更新分类）。

我理解这是一个复杂的问题。让一个插件为每个人不同的内容进行格式化确实极具挑战性，我认为 Discourse 团队已经做得非常出色。我只是在寻找一个尽可能简单的变通方案。也许只是对帖子链接进行“一键预览”（Oneboxing）？这样至少帖子（或其链接）会出现在 Discourse 网站上，尽管不会有协调的来回同步。

感谢任何可能的建议。

simon · 2021 年1 月 19 日 23:09

问题可能在于 Discourse 无法在 WordPress 页面上找到任何内容。不过，我本以为这不会导致循环。如果 Discourse 在页面上找不到任何内容，它应该只是静默失败。以防您正在测试的帖子没有实际内容，请尝试创建一个包含实际文本内容的帖子，看看是否有改善。您可能还需要查看如何配置允许的嵌入选择器设置。“允许的嵌入选择器”设置可用于帮助 Discourse 查找页面内容。

您是否使用区块编辑器（Block Editor）发布 WordPress 帖子？如果是，您是如何向帖子中添加图片的？您是否使用了添加自定义图片块的插件？

它加载的帖子摘要中是否包含帖子的图片？

我本以为摘要不会在这里自动加载。我原本期望的是显示“显示完整帖子”按钮。点击该按钮应加载摘要。当从 WordPress 向 Discourse 发布完整帖子内容时，您可以通过禁用 Discourse 的 embed truncate 站点设置来防止显示“显示完整帖子”按钮。

这可能是一个适合您的好方案。请查看 https://meta.discourse.org/t/wp-discourse-template-customization/50754/1，了解如何自定义用于发布帖子的模板。其中有一个将帖子作为 Onebox 发布的示例模板，见此处。

bobbysmith · 2021 年1 月 20 日 21:12

你好，

西蒙，非常感谢你如此迅速的回复。

我已经按照你的建议进行了尝试，但未能改变结果。这很可能更多是我的 Discourse 使用技巧问题，而非其他原因。

你的第一个建议是确保帖子包含一些内容。这些帖子确实有实际内容，所以我认为这不是问题所在。你还建议我查看“如何配置允许的嵌入选择器”设置，我也照做了，但尚未注意到任何变化。我保持了该设置的简单性，甚至包含了 <p> 标签和另一个（相当通用的）CSS 类，但当我点击“显示完整帖子”时，它仍然只显示“加载中”。

我使用的是区块编辑器（Block Editor）。我没有安装任何特定的图片插件，但我使用了 Genesis Blocks。不过，Discourse 试图加载的图片是帖子的特色图片（Featured Image），我认为这是 WordPress 的原生功能。

关于你的问题“它加载的帖子摘要是否包含图片？”——不，该帖子本身不包含任何图片。但是，如果我在图片应该出现的位置点击，它会链接回原始文章。

我会进一步研究“一键嵌入”（Oneboxing）选项。也感谢你提供的相关主题链接。

simon · 2021 年1 月 20 日 21:21

这可能是导致该图片出现问题的原因。我会进一步调查。

我不确定这里出了什么问题。如果你的 Discourse 站点是公开的，能否分享一个存在该问题的主题链接？如果你愿意，也可以通过私信发给我。

bobbysmith · 2021 年1 月 20 日 21:24

再次感谢。目前网站仍处于测试阶段，尚未公开。这是否可能是问题所在？

另外，不知为何“一键嵌入”功能无法正常工作。例如，如果我粘贴一个来自 CNN.com 的链接，一键嵌入可以完美运行；但来自我的非 HTTPS 测试站点的链接，却只是显示为一个普通链接。这是否是因为测试站点不安全？

simon · 2021 年1 月 20 日 21:30

Discourse 站点设为私有不应导致问题。您是否以某种方式隐藏了 WordPress 站点？如果 WordPress 站点阻止了 Discourse 获取完整帖子内容的请求，那就会引发问题。

bobbysmith · 2021 年1 月 20 日 21:33

Discourse 站点目前是公开的。我本想在开发期间将其隐藏，但不知如何设置暂存模式。我还有一个处于暂存/开发阶段的主 WordPress 站点，该站点已设置为私密/隐藏。

我能够通过 WordPress 插件强制更新分类。我（可能错误地）推测，这意味着即使主站点处于暂存状态，Discourse 也能与其建立联系。

话题		回复	浏览量
Images not publishing to Discourse in WP 5.3 WordPress	26	4245	2020 年8 月 13 日
Broken image in Discourse (but they work in the message preview) WordPress	18	3820	2025 年1 月 14 日
Markdown rendering issue with image surrounded with HTML Bug	24	4202	2022 年4 月 4 日
Thumbnail generation & markdown rendering issue Support	14	1985	2020 年5 月 30 日
Run-together markdown formatting mixed with html makes images not load Support	13	1348	2021 年8 月 20 日

修复由 WP Discourse 和 RSS 插件创建的帖子中的损坏图片

相关话题