لن يتم عرض الصورة بعد تنزيلها على Discourse

[Canapin (Coin-coin le Canapin)]

Hi!

I have some WP articles like this one: Et vous, vous avez appris vite ? - Monocycle.info
Which are sent on Discourse. At first, the remote image is correctly displayed on the Discourse post, but when the remote image is downloaded to Discourse, then it won’t show anymore: Et vous, vous avez appris vite ? - Actualités - Monocycle.info

Looking at the Discourse post’s code after the image has been retrieved to Discourse, it looks like this:

If I add an empty line before the image code, then it is correctly displayed:

Here’s the WP article’s code:

<!-- wp:paragraph -->
<p>Dans le cadre d'une recherche sur l'apprentissage du monocycle, Claudia Stehr et Klaas Bil s'intéressent au temps de l'apprentissage. Et pour cela, ils ont besoin d'un grand nombre de statistiques.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Pour les aider, <a href="https://forms.gle/SEQtC6JQyw3tA7jv9">répondez à leur questionnaire</a> (version française) ! Si vous avez déjà répondu dans une autre langue, il ne faut pas doublonner. :)</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh5.googleusercontent.com/N8Qtu1XBr7hK4Wg3hkxiMWPdU9V_czUuNS8VjHVxWfnLlQTCKrlUM2QoWrt9Zd4iXeMceaX7sZSi_8J_dJhOAgpISIdLdjguoSY0ZfrjCoHs6KEfBrXmrJcKU7tsyGaIqQ=w650" alt="" title=""/></figure></div>
<!-- /wp:image -->

What happens exactly? Is that some sort of WP-Discourse / Markdown bug, or something else?

[angus (Angus McLeod)]

This is about how Discourse handles HTML to Markdown conversion (it’s not to do with WP Discourse). I tried to reproduce your issue, however the <img> tag is not being converted into a markdown image, and it’s displaying properly (including after post “cooking”).

HTML Image markdown test

[Canapin (Coin-coin le Canapin)]

@angus

however the <img> tag is not being converted into a markdown image, and it’s displaying properly (including after post “cooking”).

Am I misunderstanding something? The image isn’t displayed in your link:

[Canapin (Coin-coin le Canapin)]

@Arkshine sent me this solution that adds an empty space before an image:

add_filter('wp_discourse_excerpt', [$this, 'wp_discourse_excerpt'], 10, 1);

/**
 * Adds blank spaces above any <img> tag.
 * Purpose is to avoid Discourse failure to display markdown downloaded image.
 *
 * @param $post_content
 *
 * @return string
 */
public function wp_discourse_excerpt($post_content)
{
    $post_content = preg_replace('/(<img\s)/i', "\n\n$1", $post_content);
    $post_content = preg_replace('/[\n]{3,}/', "\n\n", $post_content);

    return $post_content;
}