Fix broken images for posts created by the WP Discourse and RSS plugins

I switched to the Block editor (it has to be done at some point since the classic editor support will end next year), but it didn’t fix the issue. The images were hosted on Facebook.

Are you able to check the image markup on the WordPress post by selecting the ‘Code editor’ from the sidebar? What I’m wondering is what kind of block (if any) the images are in:

The WordPress plugin is using block names to parse the images. If the image isn’t in a block that the plugin is currently handling, its markup won’t be cleaned up.

1 Like

The WP post was a copy-paste from Facebook, here’s a sample of the HTML code.
The images were image emojis:

<div dir="auto"><span class="pq6dq46d tbxw36s4 knj5qynh kvgmc6g5 ditlmg2l oygrvhab nvdbi5me sf5mxxl7 gl3lb2sf hhz5lgdu"><img src="https://static.xx.fbcdn.net/images/emoji.php/v9/t34/1/16/1f914.png" alt="🤔" width="16" height="16"></span>Comment ? Vous avez 1 mois pour nous envoyer vos plus beaux poèmes et/ou dessins sur le thème du monocycle, ce qu’il vous évoque, votre passion pour ce sport, etc.</div>

I don’t have the same sidebar as you in the block editor, so I displayed the block HTML content with this option:

If the issue happens because it’s not “regular” WP content but a HTML copy paste, that’s not an issue. I’ll tell my users to avoid copy pasting images, even emojis. :slight_smile:

1 Like

Yes, I think the issue here is that the HTML was copied into the WordPress post. The WP Discourse plugin should be able to handle images that are added through an image block. It’s not setup to fix the HTML for images that are added in any other way.

Ideally, DIscourse would be able to handle HTML image tags that are wrapped in other HTML tags, but it’s a tricky problem. Possibly the WP Discourse plugin can be updated to handle images that are added outside of image blocks. My hope was that dealing with image blocks would cover most cases, but there seem to be a lot of exceptions to that.

3 Likes

Hello,

I have read through this topic and the other main topic dealing with images.

Publishing an excerpt from my site to Discourse works perfectly. However, when I click the Show Full Post button, it seems to enter a loading loop and never loads the full post (or does anything else for that matter).

If I try to publish the full post to Discourse, that also works with a few quirks:

  1. images don’t load (which is how I found these topics);
  2. it loads the full post (I have several buttons/links within each post’s contents that may confuse the plugin), but it also loads a perfectly formatted post excerpt at the end of the full post for some reason. In other words, it loads the full post (minus the images), and then loads another excerpt of the same post at the bottom of the post.

One thing to note: my WP site is in a staging mode and is not HTTPS. My Discourse site is HTTPS. I thought that the loading of a the full post might be the issue with the staging site, but other things seem to work (ex. forcing category updates).

I understand this is a complex issue. Having a plugin format someone else’s posts when we are all doing different things would be incredibly challenging and I think the Discourse team has done an admirable job. I am just trying to find a workaround that is as simple as possible. Perhaps just Oneboxing the link to the post? At least the post (o a link to it) would be on the Discourse site, but there would not be any coordinated back and forth.

Thanks for any suggestions anyone may have.

The problem may be that Discourse is not able to find any content on the WordPress page. I wouldn’t expect this to cause a loop though. Discourse should just fail silently if it can’t find any content on the page. Just in case you are testing this with a post that has no real content, try creating a post with some actual text content and see if that makes a difference. You might also want to look into How to configure the allowed embed selectors setting. The allowed embed selectors setting can be used to help Discourse find the page’s content.

Are you using the Block Editor to publish your WordPress posts? If so, how are the images being added to the posts? Are you using a plugin that adds custom image blocks?

Does the post excerpt that it loads include the post’s images?

I wouldn’t expect the excerpt to be automatically loaded here. What I would expect is for the “Show Full Post” button to be displayed. Clicking that button should load the excerpt. When full post content is published from WordPress to Discourse, you can prevent the “Show Full Post” button from being displayed by disabling the Discourse embed truncate site setting.

This might be a good solution for you. Have a look at WP Discourse template customization for details about how to customize the template that’s used to publish posts. There is an example template for publishing the post as a onebox here.

Hello,

Thank you, Simon, for your very quick reply.

I have worked through your suggestions but have not been able to change the outcome which is probably more of an issue with my Discourse skills than anything else.

Your first suggestion was to ensure the post had some content. The posts did have real content so I don’t think that was the problem. You also suggested I work through the How to Configure the allowed embed selectors setting, which I also did and have not yet noticed any difference. I kept this setting very simple and even included the

tags and one other (fairly generic) CSS class, but when I click Show Full Post, it still just says Loading.

I am using the Block Editor. I don’t have any specific image plugins, but I do use Genesis Blocks. However, the image that Discourse is trying to pull in is the Featured Image for the post, which I believe is vanilla Wordpress.

As for your question “Does the post excerpt that it loads include the post’s images?” - No, the post does not include any images. However, if I click on where the image should be, it links me back to the original article.

I will look further into the Oneboxing option. Thank you for the links to that topic as well.

That might be the cause of the issue with that image. I’ll look into that.

I’m not sure what could be going on with this. If your Discourse site is public, can you share a link to a topic that has that issue? You can send it to me in a PM if you prefer.

Thanks again for this. The site is still staging and is not public. Could this be the problem?

Also, for some reason the Oneboxing doesn’t work. If I paste a link from, for example CNN.com, the Oneboxing works great, but from my staging, non-https, site, it just pastes a link. Is that because the staging site is not secure?

Having the Discourse site private should not cause a problem. Are you hiding the WordPress site in some way? If the WordPress site is blocking the requests from Discourse to get the full post content, that would cause an issue.

The Discourse site is public. I would love to hide it during development, but I couldn’t figure out how to stage it. I have a main WP site that is in staging/development, and that site is private/hidden.

I am able to force a category update from the WP plugin. I assume, probably incorrectly, that meant Discourse could contact the main site even though the main site was staging.

You can do this from the Login section of your Discourse settings page. Select the login required setting to prevent anonymous users from viewing the site.

This means that the WP Discourse plugin can make API calls to your DIscourse site, but it does not mean that your WordPress site is allowing requests made from Discourse to get through. When you click the “Show Full Post” button, Discourse attempts to make a request to your WordPress site to scrape the post content. It seems likely this request is being blocked.

Thank you for this great information. I have disabled the login (great tip!) and will probably just wait to see what happens when I eventually take the main site live. Perhaps at that time it will properly enable the Show Full Post button.

About Onebox, do you know if it only works for https sites?

There are a few requirements for getting a link to form a onebox. I am not certain if HTTPS is now a requirement, but I wouldn’t be surprised if it was. The other requirements are that the page that’s linked to need to have an open graph description tag set, and the page needs to allow requests from the Discourse server to get through. I suspect that you’re running into a few issues with your staging site that are preventing oneboxes from being created.

1 Like

Hi Simon,

This makes sense. I will try Oneboxing again once I take the main site live.

As mentioned above, hopefully taking the site live and out of staging will also help the post to discourse functionality as well.

Thank you, again, for your help and insight.

It seem that the broken image from RSS feed cannot be fixed manually.
I can see the image reappear in the preview in the right side of the editor. But after I press save, the image are still broken in the post.

Discourse won’t generate thumbnail if the image is not local. If I disabled image download domains, all the post imported will have no thumbnail.

4 Likes

Having the same issue. I see two images in preview but after saving it looks like this:

Any solutions to how to get the images also display in the post and not only preview?

Update: 2.7.0.beta7

2 Likes

You need to edit the post to add an empty line above both of the markdown tags.

If you are publishing the posts to Discourse from a website, you should add the domain that the images are being served from to your Discourse disabled image download domains site setting. This should prevent the issue from happening with new posts that are published to Discourse.

Thanks Simon. Unfortunately I cannot make it work:

I can send you the public URL, but not sure if this is considered spam. I can PM if you want.

Let me know if you need more info.
(Currently 2.7.0.beta7, 890b06b10f)

Update: some more background: The posts where imported from via import script originating from a Freshdesk Forum XML Export. The actual content contained the full HTML. We then imported the backup from our local devsystem to our fresh production instance. Initially the images were displayed, but because there was the original img-tag referencing the external URL. after a while Discourse downloaded the external remote image… but then the post looked broken as shown above.

1 Like

I’m really not understanding the complication here. Clearly, the HTML image tag is being replaced with markdown – e.g. ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg). Why not just make that include two carriage returns before the !? That’ll make it render right, and allow the image upload feature to work to prevent broken images and cross-site issues.

Is there a real-world non-theoretical situation where that whitespace might cause a problem? Is that problem worse than the “images are just broken all of the time” state of the current plugin?