Images not publishing to Discourse in WP 5.3

I’m guessing this is related to the changes to blocks in the 5.3 update. You can see the post here: In Conversation with Anna Morgan - In Layers: Conversations - Nature Photographers Network

FYI I also have this snippet for CDN images

add_filter( 'wp_discourse_excerpt', 'wpdc_custom_excerpt' );
function wpdc_custom_excerpt( $content ) {
    
    return apply_filters( 'as3cf_filter_post_local_to_s3', $content );
}
3 Likes

I am also getting this error in my dashboard which I’m fairly certain is from the Wordpress plugin.

I came across this post WP Discourse plug in being odd but I am on 1.9.7 and the publishing username is an active account.

I’ll be looking into this today. What I’m seeing on my site is that images published from WordPress are displayed correctly until Discourse attempts to download the remote image. When that is done, I’m ending up with markup like you are getting in the post:

![](upload://kw9YUV5qtquQf5xwatRof6S9RmK.jpeg)

I am not sure if this is related to changes in WordPress 5.3.

If you are getting the We detected an API request using a deprecated authentication method warning, that will not be causing the issue you are having with images. WP Discourse versions 1.9.6 and greater should not be causing that warning. All API requests from the plugin are now using header based authentication.

2 Likes

The problem seems to be that when the Discourse upload markdown is wrapped in HTML tags, the markdown isn’t getting parsed. For example, this is what I’m seeing for a WordPress post after the Discourse PullHotlinkedImages Job is run:

<small>Originally published at:			https://scossar.com/figure-tags-cause-issues/
		</small><br>
<figure class="wp-block-image">![](upload://3hPHOMnM5v5srjlz5QWGmVxY4AL.jpeg)</figure>

Editing the post to remove any html tags that are surrounding the markdown link solves the issue, but a proper solution will need to be found for this.

3 Likes

Sorry to bug, but are you working on this Simon or has someone been assigned to it?

The issue is that when posts with images are published to Discourse, the post’s HTML initially looks something like this:

<figure><img src="https://example.com/wp-content/uploads/your-image.png" /></figure>

If the download remote images to local site setting is enabled on Discourse, the image link will break when Discourse downloads the post from WordPress. The problem will happen any time an image tag with a remote URL is wrapped with HTML tags.

The easiest solutions for this issue are to either disable the download remote images to local site setting, or to not publish full post content from WordPress to Discourse.

In the future, the WP Discourse plugin may remove the option to publish full posts. There are multiple issues that can occurr when publishing full post content from WordPress to Discourse. Most of these issues should be able to be solved by publishing excerpts from WordPress to Discourse and then using the Show Full Post button to display the full post on Discourse. Does this sound like something that could work for your case?

Another possible solution would be to customize the template that is used to publish WordPress posts. Images could be extracted from the posts and then published along with a post excerpt. With a custom template, the image HTML could be structured in a way that doesn’t conflict with the Discourse markdown processor.

1 Like

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