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) #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: