Problems with thumbnails from Soundcloud and YouTube oneboxes

[quimgil]

We are using Topic List Previews with tiles in our main page. Yesterday we had to rebuild our instance for reasons unrelated to TPL. We were aware of the change of thumbnailing backend in Discourse core and we knew that upgrading could cause problems with thumbnails. Still, it had to be done.

Anyway, after rebuilding (including the Postgres upgrade), all thumbnails coming from oneboxes were gone. No problem, we rebaked all posts and then most thumbnails reappeared (good) but not all (intriguing and bad). We rebaked a couple more times just in case, but there are some remaining posts that won’t get their thumbnail in the main page even if the oneboxes render without problems in their topic page.

Two patterns detected so far:

• Soundcloud oneboxes render without problems, but the thumbnail is missing systematically ("Select Thumbnail will show no thumbnails), and no rebuild HTML will solve this. For instance, check Female:pressure podcast episode 60 Inverno - female:pressure podcast - EQlzr.
• Some thumbnails of YouTube oneboxes were missing in the main page (only some) and then, after visiting the topic page, they would magically appear in the main page. However…

There is one (and only one, the last one) topic with a YouTube onebox that won’t generate a thumbnail, no idea why: Look Mom No Computer (DIY Synths) - Listen / Watch - EQlzr.

[merefield (Robert)]

As discussed, thumbnailing production logic is now built into core.

What TLP used to have to do is no longer necessary, largely.

For reference, the core criteria for inclusion are the following:

  def extract_images_for_post
    # all images with a src attribute
    @doc.css("img[src]") -
    # minus emojis
    @doc.css("img.emoji") -
    # minus images inside quotes
    @doc.css(".quote img") -
    # minus onebox site icons
    @doc.css("img.site-icon") -
    # minus onebox avatars
    @doc.css("img.onebox-avatar") -
    # minus small onebox images (large images are .aspect-image-full-size)
    @doc.css(".onebox .aspect-image img")
  end

from discourse/cooked_post_processor.rb at master · discourse/discourse · GitHub

TLP modifies this slightly, but only to loosen it up. I’d like to drop this override completely if possible:

  def extract_images_for_post
    # all images with a src attribute
    @doc.css("img[src]") -
    # minus emojis
    @doc.css("img.emoji") -
    # minus images inside quotes
    @doc.css(".quote img") -
    # minus onebox site icons
    @doc.css("img.site-icon") -
    # minus onebox avatars
    @doc.css("img.onebox-avatar") #Broader criteria than Discourse Core
  end

from discourse-topic-previews/cooked_post_processor_edits.rb at master · paviliondev/discourse-topic-previews · GitHub

As you can see I am reducing the amount of exclusions by allowing small onebox images as defined by core.

Rather than maintaining this in TLP, it would be good to get consensus and parity across the use cases, so I don’t have to maintain this in the plugin at all.

This is also relevant to you @Arkshine

[quimgil]

Thank you @merefield, this is very informative.

I just want to say that the previous thumbnailing of Soundcloud oneboxes provided great results, and this regression is really bothering for a site focusing on music like ours.

I don’t mind if we miss a YouTube thumbnail here and there.

Curious about how this will evolve. I agree that the goal is to fine tune thumbnailing in Discourse core to find the best common ground between the many requirements and wishes. Thank you to everyone working on this.

[david (David Taylor)]

@quimgil

There is one (and only one, the last one) topic with a YouTube onebox that won’t generate a thumbnail, no idea why

At a glance, I don’t think that’s a YouTube onebox. I suspect someone has used raw YouTube embedding code in the post. If you turn it into a onebox, the thumbnail should work.

@quimgil

Soundcloud oneboxes render without problems, but the thumbnail is missing systematically

Did this used to work with the old TLP plugin? Soundcloud oneboxes are iframes, so I struggle to see how we could pull a thumbnail image from them, even my updating our selection criteria. @merefield did TLP have some soundcloud-specific logic somewhere?

[merefield (Robert)]

Yes, there was some custom logic around oneboxes, though this was not exclusively for SoundCloud:

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

      if img
        ## We need something more specific to identify the image with
        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

This has been stripped out to defer to the core logic.

[quimgil]

@david

At a glance, I don’t think that’s a YouTube onebox . I suspect someone has used raw YouTube embedding code in the post. If you turn it into a onebox, the thumbnail should work.

Ah, it didn’t occur to me to check the source.

It was a onebox, but the URL had an extra argument:

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

I changed it to the plain URL:

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

There wasn’t an immediate change. After rebuilding HTML there wasn’t an immediate change either, but then I went to check Sidekiq and I saw one related job scheduled. After waiting 4 minutes patiently, the thumbnail is now available and it is displayed in the main page. Thank you @david for such quick reply, and on a Sunday!

@david

Did this used to work with the old TLP plugin?

Absolutely. Sadly, I didn’t take any screenshot. The main page would show the image at the left of the onebox.

[david (David Taylor)]

@quimgil

It was a onebox, but the URL had an extra argument

Interesting, I’ll take a look at this next week. I think it should still work, even with an extra argument

@merefield

custom logic around oneboxes

Ah I see, so you pulled the Onebox preview html, and extract thumbnails from that. For soundcloud, that gives a thumbnail

[merefield (Robert)]

Yes, this is based on @angus’ marvellous hack I take no responsibility! Works well though.

UPDATE Actually, I lie, my finger prints are also all over it too! I wrote some of this code so long ago I’d forgotten about it, 2015!

ensure thumbnails are included in tracked changes for post revisor

[david (David Taylor)]

These are both tricky problems, and I think for now we will be leaving the behavior as-is. We may be able to add some improvements in future. I created a couple of #feature topics to track progress

For the YouTube difference, see:

Add thumbnails for YouTube playlist URLs

For normal YouTube videos, we use a custom embedding system. This doesn’t support the playlist UI. So that explains the difference. We’re not planning any immediate changes here, but I’ll leave this topic open as a feature request.

For the soundcloud issue, see:

Thumbnails for iframe oneboxes

Continuing the discussion from Problems with thumbnails from Soundcloud and YouTube oneboxes: When oneboxes are created with an iframe, we have no image to pull as a thumbnail. It would be cool if Onebox could supply an image for us to use. Pavilion’s topic-list-previews plugin had this workaround: But this has quite a large performance cost, so I don’t think we want to do it in core. I see a couple of clean options: Onebox could supply a thumbnail url. We would need to teach Discourse t…

[Touri (Max)]

I had the same problem with https://youtu.be/ style youtube links. After changing them to https://www.youtube.com/watch?v= style it worked again.

[codinghorror (Jeff Atwood)]

That’s odd, can you share those specific youtube links here? Either form should work.

[Touri (Max)]

Maybe a re-render would have done the job as well.
But it seems to live on in the versions:

I did reset the link to the old one, but now everything renders nicely. I guess that this was due to a rendering error after the beta6 update.