Topic Embedding via 'Show Full Post': Nested Images

(James Croft) #1

I’m in the final stages of our forum configuration, and I’m really stoked with the inclusion of the ‘Show Full Post’ button that @eviltrout put together. It means I can put a small summary of the post directly in the forum, while also allowing people to pull in the entire post. It really is the best of both worlds. I’m sure anyone who is using Discourse and a blog in tandem feels the same way.

The only part that I cannot find a way around is content images that are nested in a <div>. Let me explain.

On our Wordpress blog, there are two types of images in posts: standard images, and ‘borderless’ images which are super-wide and break out of the column of the content section.

Standard images are simple img tags, like <img src="#" />, but borderless images are created by nesting the image in a div, like:

<div class="borderless-image">
<img src="#" />

When you hit the ‘Show Full Post’ button in Discourse, standard images are pulled into the topic just fine. However, if an image is ‘borderless’ (ie, nested in a div), it is ignored.

I’ve tried adding various combinations to the CSS selector whitelist to no avail.

Currently, I have as my whitelist selector, and if I change that to:>div>img, I can embed the image (only the image) successfully.

However, as soon as I start using those two at the same time, (for,>div>img) it goes back to ignoring the nested image.

Any advice on how I can configure the embedder/whitelist to work with this scenario?

(Jeff Atwood) #2

The Show Full Post button works well for me! And I love it on Boing Boing.

What you’re running into is the fact that the button uses the “readability” algorithm to pull a version of the post from the target URL. And readability is kind of a heuristic, not an iron-clad guarantee.

Any advice here @sam?

(Sam Saffron) #3

Yeah … this is tricky business, we have the same issue at BBS.

We use:

For this work. I recently added support for white listing and black listing:

I feel we need yet another override that forces the selection somehow. I am thinking there are 2 options of going about this:

  1. Build another component that just does the HTML tidy up and uses a targetted node.
  2. Build something into ruby-readability to handle this.

Not sure what the best option is

(phil) #4

I have images embed in my blog post, but none of them show when I click on the ‘Show Full Post’. I’d like to find some tricks to allow at least one image to show up.

Can anyone recommend me something to do in order for my images to show ?

Does ‘embed whitelist selector’ allow listing multiple CSS elements in its field ? It looks like it doesn’t as it says ‘CSS selector for elements that are allowed in embeds’.

I notice ‘selector’ is singular… so I assume only one selector can be listed there :frowning:

(Kane York) #5

You can OR css selectors with a comma. So you only need one.

Ex: a,span,img.embed-me

(phil) #6

thanks I got it now.

I have to say that using ‘img’ as css selector alone is pretty cool as it embed only images, but the problem is that when I do that then the post always show in full and I don’t have the benefit of the small excerpt at the top.

Still super cool feature, more documentation would certainly help many people using this to the full potential.

For example, can we specify CSS class or id ? or can we only use CSS elements (a,p,img…) ?

(system) automatically bumped #7

(Sam Saffron) #8

In case anyone finds this we have the

embed_whitelist_selector and embed_blacklist_selector. They are hidden site settings so you need to amend them from the console.

./launcher enter app
rails c
SiteSetting.embed_whitelist_selector = '.please_select_me' 

Using these site settings you can control what classes get preferential treatment.

See also:

(Dustin Pitcher) #9

Hey @sam, I’ve been fighting with whitelisting some elements all day. It appears that blacklist will exclude individual selectors from a default scope of elements but when whitelisted elements are defined that overrides whatever default scope there was. Is this correct? I’ve reviewed the source for Ruby Readability, discourse/app/models/topic_embed.rb and the Nokogiri docs and haven’t been able to make much headway. Are you able to share how your embed_whitelist_selector is setup on BBS?

Also, I want to confirm that I can do some advanced targeting. For example:

To select all image tags within anchor tags that themselves are within div tags, I would do this: div a img

And that I can specify as many comma separated selectors as I need to, for example: article p, article figure img, article blockquote, article strong <- Specifying article each time seems redundant but if the embed_whitelist_selector defines the entire scope of what is brought over then it is going to need to be pretty specific, right?

What I’m trying to do is get “Show Full Post” to pull in images created in Gutenberg editor (they are inside of a figure tag) and youtube embeds which are also within the Gutenberg editor. I did try to whitelist for iframes in the Admin > Site Settings but that didn’t do the trick.

Lastly, when I make adjustments to my SiteSetting.embed_whitelist_selector it doesn’t seem to change the behavior right away. Is there a delay or something that needs to be rebuilt when I change that setting? Or should it just work as soon as I hit Return from the rails command line?

Thank you in advance for any help you can provide me with.

(Simon Cossar) #10

Thanks for reviving this topic! With the Block Editor now enabled by default on WordPress sites it’s important to get this sorted out.

This is working for me. I’ll see if it’s possible to be less specific.

I have also added article ul and article ol to my embed_whitelist_selector Site Setting to allow for lists to be displayed. I’ll see if there’s anything that can be done with YouTube videos.

The response from the embed URL is cached for 10 minutes. In development you can run Rails.cache.clear to clear the cache. I wouldn’t recommend that on a production site though.

For WordPress sites, possibly the WP Discourse plugin should be updating the embed_whitelist_selector Site Setting to a sane list of default elements. My only concern with this is that the setting is (partially) hidden on Discourse, so it will be difficult for sites to adjust the setting if they want to make changes to the allowed selectors.

It is currently possible to set the embed_whitelist_selector setting through the UI by adding your site as an Allowed Host at Admin / Customize / Embedding and then adding your CSS selectors to the Crawler Settings section. This feels like a hack though.

(Dustin Pitcher) #11

Right on, thanks for the reply. I have configured a fairly specific whitelist set that seems to be working for my case:

SiteSetting.embed_whitelist_selector = '.entry-content figure.wp-block-image, .entry-content figure.wp-block-image figcaption, .entry-content img, .entry-content p, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content figure.wp-block-embed-youtube div, .entry-content figure.wp-block-embed-youtube div iframe'

Although I am still unable to pull in iframes despite trying a few different selectors. You can see in the screen shot that I’ve whitelisted the youtube domain:

Here is the page I’m pulling in:

Here is the corresponding discourse topic: T.REX ARMS - A Conversation with Lucas Botkin - ARBuildJunkie - AR-15 Builders Forum