Onebox looks horrible on Discourse Comments (below WP Post)

Hi there!

I like the onebox for previewing URLs in Discourse. It looks great: 01.18.2018-14.18.14

However, the onebox looks -not as nice- (or horrible) in Wordpress comments below the post: 01.18.2018-14.19.00

Is it possible to disable onebox (and just show bare URLs) in the Wordpress comments section?

1 Like

The problem with Discourse oneboxes displayed in WordPress comments is that the Discourse onebox styles aren’t set WordPress. All of the Discourse onebox markup is present in the WordPress comment, so it’s possible to add the Discourse onebox styles to your WordPress site.

You can hide the body of the onebox with the following CSS on your WordPress site. This will just leave the onebox header - a link to the original article.

.comment-content .onebox .onebox-body {
    display: none;
}
4 Likes

Hi @simon

Thanks for your reply and your help.

I managed to clean up the onebox styling a bit with your suggested CSS (01.29.2018-14.27.06), but there is still some undesired HTML being parsed, like an H3 header. Does the Discourse Wordpress plugin offer any hooks so I can overwrite the HTML output?

Or perhaps this is a great suggestion to improve the Discourse Wordpress plugin?

Looking forward to your reply. Thanks!

.comment-content .onebox .aspect-image,
.comment-content .onebox .source,
.comment-content .onebox p {
    display: none;
}
1 Like

No, but it should. I’ll add a filter the the comment content before it gets added to the comment_html template.

Hi @simon

Thanks for your reply and help. Any ETA on this plugin update?

Looking forward to your reply. Thanks again for your help.

I’ll add it to the code right now. It will be in the next update. That’s going to happen sometime this week.

Edit: the filter will be named wpdc_comment_body.

$comment_body  = wp_kses_post( apply_filters( 'wpdc_comment_body', $comment_body ) );
6 Likes

Hi @simon

Thanks for adding this filter to the WP plugin! Much appreciated!
Could you give me a PHP example code how to utilize this filter?

Thanks again!

Something like this should work to remove oneboxes from comments. It’s assuming that the libxml extension is loaded on your server. (It probably is.)

add_filter( 'wpdc_comment_body', 'wpdc_custom_comment_body' );
function wpdc_custom_comment_body( $content ) {
	// Allows parsing misformed html. Save the previous value of libxml_use_internal_errors so that it can be restored.
	$use_internal_errors = libxml_use_internal_errors( true );

	$doc = new \DOMDocument( '1.0', 'utf-8' );
	$doc->loadHTML( mb_convert_encoding( $content, 'HTML-ENTITIES', 'UTF-8' ) );

	$finder = new \DOMXPath( $doc );
	$oneboxes = $finder->query( "//*[contains(@class, 'onebox')]");
	foreach( $oneboxes as $onebox ) {
	    $onebox->parentNode->removeChild( $onebox );
    }

	// Clear the libxml error buffer.
	libxml_clear_errors();
	// Restore the previous value of libxml_use_internal_errors.
	libxml_use_internal_errors( $use_internal_errors );

	$parsed = $doc->saveHTML( $doc->documentElement );

	// Remove DOCTYPE, html, and body tags that have been added to the DOMDocument.
	$parsed = preg_replace( '~<(?:!DOCTYPE|/?(?:html|body))[^>]*>\s*~i', '', $parsed );

	return $parsed;
}

The Discourse plugin uses DOMDocument to fix relative links that are returned from Discourse. That code is here: https://github.com/discourse/wp-discourse/blob/master/templates/template-functions.php#L71

1 Like

Hi @simon

If I use your code, the entire URL is removed and there is no output at all. Check out: 02.21.2018-13.52.37

I think there is is an error in your code, but I can’t find out what it is.

Looking forward to your reply. Thanks a bunch!

P.s. why not remove the onebox output natively from the WP Discourse plugin alltogether below WP Posts? That it just returns the URL as a default without using this code? I think it would be the easiest option to prevent corrupt looking oneboxes all together for all users out there?

Yes, that code will remove the entire onebox. It would be possible to use a similar idea to just extract the URL. I’m not sure what the plugin should be doing with oneboxes. Maybe this is a case where it should be including some default CSS so that oneboxes look similar to how the look on Discourse?

Hi @simon

I think the easiest option would be the best: to output just the link URL in text. There are so many themes and styles around that a specific style would always cause problems.

1 Like

I agree here. Oneboxing in WP comments seems overkill and, like Erik said, there are too many variables to make the OneBox look good on any WP blog.

1 Like

I’ll write a function for removing everything from the onebox except for the URL. I’ll also try writing some CSS for making oneboxes look similar to how they look on Discourse. I agree that the way oneboxes are being displayed now looks bad, unless a site adds some CSS to deal with them.

Possibly an option to either extract the URL, or add plugin styles to oneboxes is something that can be added to the plugin.

1 Like

With a bit of CSS oneboxes can be made to look quite good in WordPress comments:

Quotes can be fixed as well:

59%20PM

Without any styles added, they look terrible. The plugin has always avoided adding CSS, with the idea that it should be supplied by the theme, but I think this is a case where we should make an exception. Unless their are objections to doing it, I’ll add an option to load a default stylesheet.

12 Likes

Hi @simon
What is the ETA for this new plugin feature?
Looking forward to your reply. Thanks!

With a bit of luck it will be out at the end of today.

3 Likes

It’s in the WordPress plugin repo now. You can find the CSS option on the Commenting Settings tab. It’s called Load Comment CSS. Depending on your theme, you may still need to use some custom CSS to fix the oneboxes. I wrote the CSS to work with the default WordPress 2017 theme.

I’ll write a function, and possibly add an option, to extract the link from oneboxes soon.

4 Likes

Hi @simon

Thanks for the update! This is a nice feature.

I am looking forward to your function (or even more an option in the plugin settings! :star_struck:) to extract the link from oneboxes as bare text, to prevent these HTML H3 headers being added https://www.screencast.com/t/Z7YMuwgBcw6. As they interfere with my content structure.

Thanks again, and if I can help you to speed up development please let me know!

For everyone interested, the amazing @joebuhlig created a plugin for us at NetworkLessons.com which converts links to plain text links (instead of the Onebox). We like to share it with the community.

https://github.com/procourse/wp-discourse-sanitize-comments

6 Likes