Images not publishing to Discourse in WP 5.3

Thanks Simon, download remote images to local was the easy solution for now. I am discouraged to hear that publish full posts may go away. The way I currently use it is by publishing a post to wordpress, which then gets published to the Articles section on discourse, which is set to Watching First Post for everyone by default. This way everyone gets an email with the full content of the article, and the best part is they can just reply to the email to add a comment, if they have to take that extra step of visiting the site it’s likely most won’t read the article if there’s just a little snippet, especially if it doesn’t have images which is really important for our site. If publish full posts went away I may consider going away from wordpress and only publish the articles directly in discourse which is not ideal for SEO, etc. but I think the engagement is more important.

1 Like

I’d miss a full publishing too.
I’m not 100% sure of what you’re suggesting here…
How would you extract images? With a regex?
I could imagine a regex that would replace image tags with proper markdown syntax. Is that what you mean and would this work?

No. I would be tempted to if I hadn’t tried that sort of thing in the past. This Stack Overflow post sort of explains the issue: html - RegEx match open tags except XHTML self-contained tags - Stack Overflow.

I’m going to look into how difficult it would be for the plugin to assemble a basic HTML version of the post content. The last resort approach would be to use DOMDocument methods to parse the content. Comments that are returned by Discourse are parsed with those methods and I haven’t been getting reports of issues with that.

I think that publishing an excerpt and then having users view the full post by clicking the “Show Full Post” button on Discourse is probably the best solution for this, but I’m reluctant to remove the “Publish full post” option from the WP Discourse plugin.

1 Like

Thank you for the explanation.
I’ll ask my authors to simply publish the article and click “update”, since publishing then updating the article on WP always seems to fix the images on Discourse.

I’d rather have my authors spending 1 more second on each article than seeing the full publish option disappear :wink:

If you have the Discourse download remote images to local site setting enabled, doesn’t the image just disappear again within a few minutes of the post being updated? If that’s not the case, I’ll look into why that fixes the issue.

1 Like

I do have this setting enabled and the images are still correctly displayed on all my latest articles after days and weeks. Example with a 1 month old article in which I encountered the image issue.

Also, I looked at the images URLs Discourse side and the links are those from WP so the images aren’t downloaded to Discourse. Is it because the site and forum share the same domain?
(site: https://monocycle.info, forum: https://forum.monocycle/info)

4 Likes

I am still getting a giant broken thumbnail instead of the image when I update the Discourse thread. When I edit the post, I see the below in < >:

img src="http://mysite.com/wp-content/uploads/2020/03/asha2.jpg" class="ss-hidden-pin-image" alt="Blog" data-pin-url="" data-pin-media="http://mysite.com/wp-content/uploads/2020/03/asha2.jpg" data-pin-description=""/

Is your WordPress site http or https?

It is http at the moment although I am looking into https.

Browsers won’t load content from insecure sources if the page is https.

If you’re relying on an HTML element to load the image this won’t work until your main site uses https.

2 Likes

I have just pushed WP Discourse version 2.0.2 to the WordPress plugin repo. The update should fix the issue with broken images that’s been happening when posts are published to Discourse with the Block editor.

Images, image galleries, as well as Youtube and Vimeo videos are all now being extracted from posts and formatted in a way that Discourse can handle. Let me know if you run into any issues with the update. If there are still WordPress blocks that are not rendering correctly on Discourse, let me know - blocks can now be parsed by name, so it should be possible to resolve any problems.

Next week I’ll add a filter that can be hooked into to parse any blocks that are too obscure to be dealt with by the plugin.

3 Likes

A bit of issues here after the update.

On WP I’m using the “classic editor” (tinymce).

I had old articles with videos URLs in [video] shortcodes and my most recent articles (less than 3 years) used the ARVE video embedder plugin, wich puts the video URL inside a [arve] shortcode.
So I filtered the posts from WP to Discourse with this:

    $excerpt = preg_replace('/\[arve .*url="(.*?)" .*\/\]/is',"\n$1\n", $excerpt);
    $excerpt = preg_replace('/\[video .*mp4="(.*)"\]\[\/video\]/is',"\n$1\n", $excerpt);

It was working perfectly and the video URLs only were passed to Discouse, so they showed up embedded on Discourse.

But since the WP-Discourse update, the video aren’t showing up on Discourse.
I also tried simply pasting the youtube URL in tinymce, without shortcode (I learned that no shortcode is required for WP to embed a youtube videosomehow… Or maybe it’s because one of my other plugins or my theme? :thinking: But I think that doesn’t matter), and removing my preg_replace functions, but the video still won’t show up on Discourse.

Here is my text on WP (plain text, not wysiwyg tab):

https://www.youtube.com/watch?v=e6MCkspqtxo

[arve url="https://www.youtube.com/watch?v=e6MCkspqtxo" /]

How it appears on WP:

Post on Discourse:

Discourse post HTML code:

<p>Test vidéooo:</p>
<div data-mode="normal" data-provider="youtube">
<div></div>
</div>
<div data-mode="normal" data-provider="youtube">
<div></div>
</div>

edit: also, I noticed that when the article is private on WP, it doesn’t sync on Discourse when we edit the article. That’s a bit annoying when we want to do some tests privately.

1 Like

That is strange. My hope with the change was that it wouldn’t affect posts that are published with the Classic editor. I’ll try to reproduce the issue. Can you share the markup that you see if you open the post in the editor’s Text tab?

1 Like

With the WP plugin ARVE

<p>Test vidéooo:</p>
<div class="arve-wrapper aligncenter" data-mode="normal" data-provider="youtube" id="arve-e6MCkspqtxo-3" style="max-width:800px;" itemscope itemtype="http://schema.org/VideoObject">
<div class="arve-embed-container" style="padding-bottom:56.250000%"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="arve-iframe fitvidsignore" frameborder="0" name sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" scrolling="no" src="https://www.youtube-nocookie.com/embed/e6MCkspqtxo?iv_load_policy=3&#038;modestbranding=1&#038;rel=0&#038;autohide=1&#038;playsinline=1&#038;autoplay=0" width="480" height="270"></iframe></div>
</div>
<div class="arve-wrapper aligncenter" data-mode="normal" data-provider="youtube" id="arve-e6MCkspqtxo-4" style="max-width:800px;" itemscope itemtype="http://schema.org/VideoObject"><div class="arve-embed-container" style="padding-bottom:56.250000%"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="arve-iframe fitvidsignore" frameborder="0" name sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" scrolling="no" src="https://www.youtube-nocookie.com/embed/e6MCkspqtxo?iv_load_policy=3&#038;modestbranding=1&#038;rel=0&#038;autohide=1&#038;playsinline=1&#038;autoplay=0" width="480" height="270"></iframe></div></div>

Without the plugin, if I just write in WP:

https://www.youtube.com/watch?v=e6MCkspqtxo

The Discourse editor shows this result:

<p>Test vidéooo:</p>
<div class="fitvids-video"><iframe title="Volkor X - Enclave" width="800" height="450" src="https://www.youtube.com/embed/e6MCkspqtxo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Seems that WP is still using another non-native library, maybe from my theme? :thinking:
I guess the issue is more on my side than yours, still, it was working well before the update… :sweat_smile:

2 Likes

Adding https://www.youtube-nocookie.com to your Discourse allowed iframes site setting should fix the issue. You will need to click the “Rebuild HTML” button for posts that have already been published to get the videos to show up.

The update shouldn’t change anything for posts that have not been published with the Block editor. When I try publishing the markup you shared, I get the exact same result when I try publishing the post with the old WP Discourse code as I do when I publish it with the updated code.

What version of WordPress is your site on?

It worked perfectly!

Thank you for your advice.

I’m using WP 5.4.1.

1 Like

Unfortunately this is not working for me. The images show intially and then disapear. I have tried with download remote images enabled and disabled.

I just published this: Connecting With Our Audience - Nature Photographers Network

Here is the Discourse topic: Connecting With Our Audience - Articles - Nature Photographers Network

I’m on 2.0.5 and the latest Discourse

When I go to that topic, I’m seeing images being served from wpengine. Possibly you have already edited the post or have disabled the download remote images setting.

One thing that’s surprising is that some images have their source set to http://www.naturephotographers.network/ and some images have their source set to https://natphotonet.wpengine.com/. The images with their source set to http://www.naturephotographers.network/ are creating mixed content warnings on your Discourse site. I’m not sure why you’re getting two different image sources.

1 Like

I noticed that as well and it seems to be part of the problem. I did try editing the post to change those urls, which worked temporarily and then they disappeared again. Then I updated it from wordpress to reset it back and that was what came over. I just turned download remote images back on and updated the post again with the same results. This seems to be a never ending problem so I’m going to suck it up and switch over to an excerpt. I appreciate all your help trying to get this to work but there seems to be too many variables to make this option reliable sadly.

1 Like

The issue with broken images should be fixed for most cases when the Block Editor is used for publishing posts. If you are finding broken images in posts that have been published with the Block Editor, let me know.

If you are unable to use the Block editor, or if using it is not resolving the issue, see Fix broken images for posts created by the WP Discourse and RSS plugins for details about resolving the issue. The short version of that topic is that you can prevent the issue by adding the domain that your images are being served from to your Discourse disabled image download domains site setting.

2 Likes