Soundcloud 和 YouTube onebox 缩略图问题

支持
1

我们使用的是 https://meta.discourse.org/t/topic-list-previews/101646，并在 我们的主页 上使用了缩略图块。昨天，由于与 TPL 无关的原因，我们不得不重建我们的实例。我们早已知晓 Discourse 核心中缩略图生成后端的变更，并知道升级可能会导致缩略图问题，但无论如何，这是必须做的。:slight_smile:

不管怎样，在重建（包括 PostgreSQL 升级）之后，所有一盒（onebox）生成的缩略图都消失了。这没什么，我们重新烘焙了所有帖子，随后大部分缩略图重新出现（很好），但并非全部（令人困惑且糟糕）。我们又重新烘焙了几次以防万一，但仍有一些帖子无法在主页上显示缩略图，即使它们在主题页面中的一盒渲染正常。

目前发现两种模式：

  • Soundcloud 的一盒渲染正常，但缩略图始终缺失（“选择缩略图”选项不会显示任何缩略图），重新构建 HTML 也无法解决。例如，请查看 https://the.eqlzr.org/t/female-pressure-podcast-episode-60-inverno/89。
  • 部分 YouTube 一盒的缩略图在主页上缺失（仅部分），但在访问主题页面后，它们会神奇地出现在主页上。然而……

有一个（且仅有一个，即最后一个）包含 YouTube 一盒的主题无法生成缩略图，我们不知道原因：https://the.eqlzr.org/t/look-mom-no-computer-diy-synths/75。

2 个赞
2

正如所讨论的，缩略图生成逻辑现已内置于核心中。

TLP 过去需要做的事情，现在在很大程度上已不再必要。

供参考，纳入的核心标准如下：

  def extract_images_for_post
    # 所有带有 src 属性的图片
    @doc.css("img[src]") -
    # 减去表情符号
    @doc.css("img.emoji") -
    # 减去引用内的图片
    @doc.css(".quote img") -
    # 减去 onebox 站点图标
    @doc.css("img.site-icon") -
    # 减去 onebox 头像
    @doc.css("img.onebox-avatar") -
    # 减去小型 onebox 图片（大型图片为 .aspect-image-full-size）
    @doc.css(".onebox .aspect-image img")
  end

来源：discourse/lib/cooked_post_processor.rb at main · discourse/discourse · GitHub

TLP 对此进行了略微修改，但只是为了放宽限制。如果可以的话，我希望完全移除这个覆盖：

  def extract_images_for_post
    # 所有带有 src 属性的图片
    @doc.css("img[src]") -
    # 减去表情符号
    @doc.css("img.emoji") -
    # 减去引用内的图片
    @doc.css(".quote img") -
    # 减去 onebox 站点图标
    @doc.css("img.site-icon") -
    # 减去 onebox 头像
    @doc.css("img.onebox-avatar") # 比 Discourse 核心更宽泛的标准
  end

来源：https://github.com/paviliondev/discourse-topic-previews/blob/master/lib/cooked_post_processor_edits.rb

如您所见，我通过允许核心定义的小型 onebox 图片，减少了排除项的数量。

与其在 TLP 中维护这一逻辑，不如就各种用例达成共识并实现一致性，这样我就完全不需要在插件中维护它了。

这也与 @Arkshine 相关。

3 个赞
3

感谢 @merefield，这非常有信息量。

我只想说的是，之前 Soundcloud oneboxes 的缩略图生成效果非常出色，而这次回归问题对我们这样一个专注于音乐的网站来说确实令人困扰。:slight_smile:

偶尔错过 YouTube 的缩略图我完全没问题。

很想知道这将会如何发展。我同意，目标是在 Discourse 核心中精细调整缩略图生成，以在众多的需求和愿望之间找到最佳平衡点。感谢所有为此付出努力的人。

1 个赞
4

乍一看，我认为那并不是 YouTube onebox。我怀疑有人在帖子中使用了原始的 YouTube 嵌入代码。如果你将其转换为 onebox，缩略图应该就能正常显示。

旧的 TLP 插件以前能正常工作吗？Soundcloud onebox 使用的是 iframe，因此我很难理解我们如何从中提取缩略图图像，即使更新了我们的选择标准。@merefield，TLP 是否在某处包含针对 Soundcloud 的特殊逻辑？

4 个赞
5

是的，当时围绕单卡片（oneboxes）确实存在一些自定义逻辑，但这并非专门针对 SoundCloud：

    if @has_oneboxes
      cooked = PrettyText.cook(@post.raw)

      if img
        ## 我们需要更具体的标识来定位图片
        img_id = img
        src = img.attribute("src").to_s
        img_id = src.split('/').last.split('.').first if src
      end

      prior_oneboxes = []
      Oneboxer.each_onebox_link(cooked) do |url, element|
        if !img || (img && cooked.index(element).to_i < cooked.index(img_id).to_i)
          html = Nokogiri::HTML::fragment(Oneboxer.cached_preview(url))
          prior_oneboxes = html.css('img')
        end
      end

      if prior_oneboxes.any?
        prior_oneboxes = prior_oneboxes.reject do |html|
          class_str = html.attribute('class').to_s
          class_str.include?('site-icon') || class_str.include?('avatar')
        end

        if prior_oneboxes.any? && validate_image_for_previews(prior_oneboxes.first)
          img = prior_oneboxes.first
        end
      end
   end

这部分代码已被移除，以交由核心逻辑处理。

3 个赞
6

啊，我没想到要去检查源代码。:slight_smile:

它确实是一个 onebox，但 URL 多了一个参数：

https://www.youtube.com/watch?v=4T6J-K8_yk4&list=PLluPQLh1xzlL2agiCCQFClcsutli90Qnz

我把它改成了普通 URL：

https://www.youtube.com/watch?v=4T6J-K8_yk4

没有立即生效。重新构建 HTML 后也没有立即变化，但随后我去检查 Sidekiq，发现有一个相关的任务已排期。耐心等待 4 分钟后，缩略图现在已可用，并显示在主页面上了。非常感谢 @david 如此迅速的回复，而且还是在周日！

当然支持。遗憾的是，我当时没有截图。主页面会在 onebox 的左侧显示该图片。

2 个赞
7

有意思，我下周会查看一下。我认为即使多一个参数，它应该仍然能正常工作。

啊，我明白了，所以你提取了 Onebox 的 预览 HTML，并从中获取缩略图。对于 SoundCloud，这会生成一个缩略图：+1：

5 个赞
9

是的，这基于 @angus 的精彩技巧 :smiley: 我概不负责！不过效果很好。

更新：其实我骗了，我的指纹也遍布其中！我很久以前写过这部分代码，都忘了，那是 2015 年！

5 个赞
10

这两个问题都比较棘手，我们认为目前将保持现有行为不变。未来我们或许能进行一些改进。我已创建了两个 #feature 主题来跟踪进度。

关于 YouTube 的差异，请参阅：

关于 SoundCloud 的问题，请参阅：

5 个赞
11

我在处理 https://youtu.be/ 格式的 YouTube 链接时也遇到了同样的问题。将它们改为 https://www.youtube.com/watch?v= 格式后，问题就解决了。

12

这有点奇怪，你能在这里分享那些具体的 YouTube 链接吗？两种格式应该都可以。

13

也许重新渲染也能解决问题。
但它似乎在这些版本中依然存在：

example
example1136×418 353 KB

我已将链接重置为旧版本，但现在一切渲染正常。我想这可能是 beta6 更新后出现的渲染错误。

1 个赞
14

本主题在最后一次回复后 30 天自动关闭。不再允许新的回复。