Markdown rendering issue with image surrounded with HTML

Related to Thumbnail generation & markdown rendering issue

When discourse downloads and replaces an image HTML with its markdown syntax โ€“ in our context, this results as:

[...]<a href="<link_here>" target="_blank">![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]

Discourse is unable to render the image

Image

image

To fix the issue, you need at least an empty line above:

[...]<a href="<link_here>" target="_blank">

![|150x150](upload://l0iarnA6SPVAyJN5l7pnQxZnPvE.jpeg)</a>[...]
Image

image

Would it be possible to allow rendering markdown image surrounded by HTML, please?

@david

3 Likes

Letโ€™s try this on meta. I am hotlinking this image inside a link:

<a href="https://discourse.org"><img src="..."/></a>

Letโ€™s see what happens when the image is pulledโ€ฆ

1 Like

@Arkshine that seemed to work ok - itโ€™s rendering <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a> successfully.

Can you share a little more of the HTML structure surrounding the link?

1 Like
Unformatted
<div data-wp><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a><div><div data-buy><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">ืงื ื™ื™ื”</a><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i></div><div data-price>โ‚ช679 <span data-old-price>โ‚ช1378</span></div></div></div><hr /><p><small>&nbsp;ืคื•ืจืกื ื‘:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a></small></p><br><p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">ื‘ื™ืŸ ืื ืืชื ื’ื™ื™ืžืจื™ื ื•ื‘ื™ืŸ ืื ืืชื ืคืฉื•ื˜ ืขื•ื‘ื“ื™ื ื•ื™ื•ืฉื‘ื™ื ื›ืœ ื”ื™ื•ื ื•ื”ื’ื‘ ื›ื‘ืจ ื–ื•ืขืง ืœื›ื™ืกื ื˜ื•ื‘ ื™ื•ืชืจ, ื”ื ื” ืœื›ื ืขื•ื“ ืžื‘ืฆืข ื‘ืœืขื“ื™ ื‘ืžื—ื™ืจ ื—ื˜ื™ืคื”!<br />
ื›ื™ืกื ื’ื™ื™ืžื™ื ื’ ืžืคื ืง, ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ ื•ืžืฉืœื•ื— ืžื”ื™ืจ ื‘ื—ื™ื ื, ืขื ืื—ืจื™ื•ืช ื™ื‘ื•ืืŸ ืจืฉืžื™ &#8211; ืจืง ื‘679โ‚ช!!!</p>
<p style="text-align: center;">ื”ืฉืชืžืฉื• ื‘ืงื•ืคื” ื‘ืงื•ืคื•ืŸ ื”ื‘ืœืขื“ื™ &#8211; <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">ืžื•ืฉื‘ ื’ื™ื™ืžื™ื ื’ ืžืงืฆื•ืขื™ SPARKFOX GC60P</h3>
</div>
<div>ืžื•ืฉื‘ ื’ื™ื™ืžื™ื ื’ ื‘ืขืœ ืขื™ืฆื•ื‘ ืžื™ื•ื—ื“ ืœืžืฉื—ืงื™ ืžื—ืฉื‘ ืœื ื•ื—ื•ืช ืžืงืกื™ืžืืœื™ืช ืœืžืฉืชืžืฉ</div>
<div>
<ul>
<li>ืžื•ืฉื‘ ื‘ืขืœ ืžืฉืขื ืช ื’ื‘ ื’ื‘ื•ื”ื”</li>
<li>ื ื•ื—ื•ืช ื”ืžืงืกื™ืžืืœื™ืช ืœืžืฉืš ื–ืžืŸ ืžืฉื—ืง ืืจื•ืš</li>
<li>ื–ื•ื’ ื›ืจื™ื•ืช ืœืชืžื™ื›ื” ื‘ืฆื•ื•ืืจ ื•ื‘ื’ื‘ ื”ืชื—ืชื•ืŸ</li>
<li>ืกื•ื’ ื—ื•ืžืจ: ืกืคื•ื’ ื™ืฆื•ืง</li>
<li>ืกื•ื’ ืžืกื’ืจืช: ืžืชื›ืช</li>
<li>ื—ื•ืžืจ: ืขื•ืจ ืขื ืกื™ื‘ื™ ืคื—ื</li>
<li>ืžืฉืขื ื•ืช ื™ื“ื™ื™ื: ืžืชื›ื•ื•ื ื ื•ืช ืžืขืœื” / ืžื˜ื”</li>
<li>ืกื•ื’ ืžื ื’ื ื•ืŸ: ืคืจืคืจ</li>
<li>ืกื•ื’ ื”ืจืžื”: ื”ื™ื“ืจืื•ืœื™ืช Class4</li>
<li>ื˜ื•ื•ื— ืžืฉืขื ืช ื’ื‘: 90ยฐ-180ยฐ</li>
<li>ืกื•ื’ ื‘ืกื™ืก: ื ื™ื™ืœื•ืŸ</li>
<li>ื—ื•ืžืจ ื’ืœื’ืœ: ื ื™ื™ืœื•ืŸ</li>
<li>ื™ื›ื•ืœืช ื ืฉื™ืื”: ืขื“ 150 ืงโ€ื’</li>
<li>ืื—ืจื™ื•ืช: ืฉื ื”</li>
</ul>
<div><strong>ืžื™ื“ื•ืช</strong></div>
<div>
<ul>
<li>ืจื•ื—ื‘: 67 ืก&quot;ืž</li>
<li>ืขื•ืžืง: 67 ืก&quot;ืž</li>
<li>ื’ื•ื‘ื” ืžืฉืชื ื”: 124-132 ืก&quot;ืž</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ SPARKFOX K1</h3>
<div>ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ ื‘ืขื™ืฆื•ื‘ ืžื™ื•ื—ื“ ืœื ื•ื—ื•ืช ืžืงืกื™ืžืœื™ืช ืœืฉืžืข ื•ื“ื™ื‘ื•ืจ ื•ื‘ื™ื˜ื•ืœ ืจืขืฉื™ ืจืงืข</div>
<div>
<ul>
<li>ื ื™ืชื ื•ืช ืœืฉื™ืžื•ืฉ ื‘ืจื•ื‘ ื”ืงื•ื ืกื•ืœื•ืช ื”ืงื™ื™ืžื•ืช ื‘ืฉื•ืง</li>
<li>ืฉืžืข ื•ื ื™ื”ื•ืœ ืฉื™ื—ื•ืช ื‘ื˜ืœืคื•ื ื™ื ื•ื‘ืžื—ืฉื‘ื™ื ื ื™ื™ื“ื™ื</li>
<li>ื•ื•ืกืช ืขื•ืฆืžืช ื”ืฉืžืข ื”ื™ื ื• ื‘ื›ื‘ืœ ืฉืœ ื”ืื•ื–ื ื™ื™ื”- ืœื’ื™ืฉื” ื ื•ื—ื”</li>
<li>ืฉืžืข ืžืขื•ืœื” ืžืžื ื”ืœื™ ื”ืชืงื ื™ื ื’ื“ื•ืœื™ื ืฉืœ 50 ืž&quot;ืž</li>
<li>ื‘ืงืจื™ ืขื•ืฆืžืช ื”ืงื•ืœ ื•ื”ื”ืฉืชืงื”</li>
<li>ื›ื•ืกื•ืช ืื•ื–ื ื™ื™ื ืžืจื•ืคื“ื•ืช ื’ื“ื•ืœื•ืช ืœื ื•ื—ื•ืช ืžืจื‘ื™ืช</li>
<li>ืงืฉืช ื”ืื•ื–ื ื™ื™ื” ืžืชื›ื•ื•ื ื ืช ืœื”ืชืืžื” ืžื•ืฉืœืžืช ืœืจืืฉื›ื</li>
<li>ืžืชื—ื‘ืจ ื™ืฉื™ืจื•ืช ืœื™ืฆื™ืืช ื‘ืงืจื™ 3.5 ืž&quot;ืž</li>
</ul>
</div>
<div>ืžืฆื•ืจืฃ ืžืชืื ืžื™ื•ื—ื“ ืœื—ื™ื‘ื•ืจ ื”ืื•ื–ื ื™ื•ืช ืœืžื—ืฉื‘ ื ื™ื™ื— ืข&quot;ื™ ืžืคืฆืœ 3.5 ืž&quot;ืž ืœ 2 ื™ืฆื™ืื•ืช 3.5 ืž&quot;ืž</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Formatted
<div data-wp>
    <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">![](upload://vAPxoqZB2QvWCrX4kbbzSO5BYYb.png)</a>
    <div>
        <div data-buy>
            <a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">ืงื ื™ื™ื”</a
            ><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i>
        </div>
        <div data-price>โ‚ช679 <span data-old-price>โ‚ช1378</span></div>
    </div>
</div>
<hr />
<p>
    <small
        >&nbsp;ืคื•ืจืกื ื‘:&nbsp;<a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a
    ></small>
</p>
<br />
<p>![](upload://npQfkOhEIdPiFymVdtVyKmwRShL.png)</p>
<p style="text-align: center;">
    ื‘ื™ืŸ ืื ืืชื ื’ื™ื™ืžืจื™ื ื•ื‘ื™ืŸ ืื ืืชื ืคืฉื•ื˜ ืขื•ื‘ื“ื™ื ื•ื™ื•ืฉื‘ื™ื ื›ืœ ื”ื™ื•ื ื•ื”ื’ื‘ ื›ื‘ืจ ื–ื•ืขืง ืœื›ื™ืกื ื˜ื•ื‘ ื™ื•ืชืจ, ื”ื ื” ืœื›ื ืขื•ื“ ืžื‘ืฆืข ื‘ืœืขื“ื™ ื‘ืžื—ื™ืจ ื—ื˜ื™ืคื”!<br />
    ื›ื™ืกื ื’ื™ื™ืžื™ื ื’ ืžืคื ืง, ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ ื•ืžืฉืœื•ื— ืžื”ื™ืจ ื‘ื—ื™ื ื, ืขื ืื—ืจื™ื•ืช ื™ื‘ื•ืืŸ ืจืฉืžื™ &#8211; ืจืง ื‘679โ‚ช!!!
</p>
<p style="text-align: center;">ื”ืฉืชืžืฉื• ื‘ืงื•ืคื” ื‘ืงื•ืคื•ืŸ ื”ื‘ืœืขื“ื™ &#8211; <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">ืžื•ืฉื‘ ื’ื™ื™ืžื™ื ื’ ืžืงืฆื•ืขื™ SPARKFOX GC60P</h3>
</div>
<div>ืžื•ืฉื‘ ื’ื™ื™ืžื™ื ื’ ื‘ืขืœ ืขื™ืฆื•ื‘ ืžื™ื•ื—ื“ ืœืžืฉื—ืงื™ ืžื—ืฉื‘ ืœื ื•ื—ื•ืช ืžืงืกื™ืžืืœื™ืช ืœืžืฉืชืžืฉ</div>
<div>
    <ul>
        <li>ืžื•ืฉื‘ ื‘ืขืœ ืžืฉืขื ืช ื’ื‘ ื’ื‘ื•ื”ื”</li>
        <li>ื ื•ื—ื•ืช ื”ืžืงืกื™ืžืืœื™ืช ืœืžืฉืš ื–ืžืŸ ืžืฉื—ืง ืืจื•ืš</li>
        <li>ื–ื•ื’ ื›ืจื™ื•ืช ืœืชืžื™ื›ื” ื‘ืฆื•ื•ืืจ ื•ื‘ื’ื‘ ื”ืชื—ืชื•ืŸ</li>
        <li>ืกื•ื’ ื—ื•ืžืจ: ืกืคื•ื’ ื™ืฆื•ืง</li>
        <li>ืกื•ื’ ืžืกื’ืจืช: ืžืชื›ืช</li>
        <li>ื—ื•ืžืจ: ืขื•ืจ ืขื ืกื™ื‘ื™ ืคื—ื</li>
        <li>ืžืฉืขื ื•ืช ื™ื“ื™ื™ื: ืžืชื›ื•ื•ื ื ื•ืช ืžืขืœื” / ืžื˜ื”</li>
        <li>ืกื•ื’ ืžื ื’ื ื•ืŸ: ืคืจืคืจ</li>
        <li>ืกื•ื’ ื”ืจืžื”: ื”ื™ื“ืจืื•ืœื™ืช Class4</li>
        <li>ื˜ื•ื•ื— ืžืฉืขื ืช ื’ื‘: 90ยฐ-180ยฐ</li>
        <li>ืกื•ื’ ื‘ืกื™ืก: ื ื™ื™ืœื•ืŸ</li>
        <li>ื—ื•ืžืจ ื’ืœื’ืœ: ื ื™ื™ืœื•ืŸ</li>
        <li>ื™ื›ื•ืœืช ื ืฉื™ืื”: ืขื“ 150 ืงโ€ื’</li>
        <li>ืื—ืจื™ื•ืช: ืฉื ื”</li>
    </ul>
    <div><strong>ืžื™ื“ื•ืช</strong></div>
    <div>
        <ul>
            <li>ืจื•ื—ื‘: 67 ืก&quot;ืž</li>
            <li>ืขื•ืžืง: 67 ืก&quot;ืž</li>
            <li>ื’ื•ื‘ื” ืžืฉืชื ื”: 124-132 ืก&quot;ืž</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ SPARKFOX K1</h3>
        <div>ืื•ื–ื ื™ื•ืช ื’ื™ื™ืžื™ื ื’ ื‘ืขื™ืฆื•ื‘ ืžื™ื•ื—ื“ ืœื ื•ื—ื•ืช ืžืงืกื™ืžืœื™ืช ืœืฉืžืข ื•ื“ื™ื‘ื•ืจ ื•ื‘ื™ื˜ื•ืœ ืจืขืฉื™ ืจืงืข</div>
        <div>
            <ul>
                <li>ื ื™ืชื ื•ืช ืœืฉื™ืžื•ืฉ ื‘ืจื•ื‘ ื”ืงื•ื ืกื•ืœื•ืช ื”ืงื™ื™ืžื•ืช ื‘ืฉื•ืง</li>
                <li>ืฉืžืข ื•ื ื™ื”ื•ืœ ืฉื™ื—ื•ืช ื‘ื˜ืœืคื•ื ื™ื ื•ื‘ืžื—ืฉื‘ื™ื ื ื™ื™ื“ื™ื</li>
                <li>ื•ื•ืกืช ืขื•ืฆืžืช ื”ืฉืžืข ื”ื™ื ื• ื‘ื›ื‘ืœ ืฉืœ ื”ืื•ื–ื ื™ื™ื”- ืœื’ื™ืฉื” ื ื•ื—ื”</li>
                <li>ืฉืžืข ืžืขื•ืœื” ืžืžื ื”ืœื™ ื”ืชืงื ื™ื ื’ื“ื•ืœื™ื ืฉืœ 50 ืž&quot;ืž</li>
                <li>ื‘ืงืจื™ ืขื•ืฆืžืช ื”ืงื•ืœ ื•ื”ื”ืฉืชืงื”</li>
                <li>ื›ื•ืกื•ืช ืื•ื–ื ื™ื™ื ืžืจื•ืคื“ื•ืช ื’ื“ื•ืœื•ืช ืœื ื•ื—ื•ืช ืžืจื‘ื™ืช</li>
                <li>ืงืฉืช ื”ืื•ื–ื ื™ื™ื” ืžืชื›ื•ื•ื ื ืช ืœื”ืชืืžื” ืžื•ืฉืœืžืช ืœืจืืฉื›ื</li>
                <li>ืžืชื—ื‘ืจ ื™ืฉื™ืจื•ืช ืœื™ืฆื™ืืช ื‘ืงืจื™ 3.5 ืž&quot;ืž</li>
            </ul>
        </div>
        <div>ืžืฆื•ืจืฃ ืžืชืื ืžื™ื•ื—ื“ ืœื—ื™ื‘ื•ืจ ื”ืื•ื–ื ื™ื•ืช ืœืžื—ืฉื‘ ื ื™ื™ื— ืข&quot;ื™ ืžืคืฆืœ 3.5 ืž&quot;ืž ืœ 2 ื™ืฆื™ืื•ืช 3.5 ืž&quot;ืž</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Screenshot of composer

This is the same issue as is brought up here: Images not publishing to Discourse in WP 5.3

2 Likes

Aha! @simon will upgrading the wordpress plugin fix old posts? Or only new posts?

2 Likes

The fix only applies to posts that are published with the WordPress Block editor. It will fix old posts if the โ€œUpdate Discourse Topicโ€ button is clicked on WordPress. It will need to be done manually for each post unless someone writes a script to loop through old posts.

3 Likes

Letโ€™s try this HTML:

<p><img src="..."/></p>

![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)

3 Likes

I think this should be fixed in Discourse as well, just in case posts are made by a non-wordpress integration. To summarise:

  1. I posted <p><img src="..."/></p>. This is perfectly valid HTML

  2. pull_hotlinked_images fetched the image, and replaced the markup with <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>

  3. This does not render

So there are two possible fixes here. Either:

  • We fix InlineUploads so that it adds a blank line in the markup. This renders fine:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

OR

@sam do you know if thereโ€™s a deliberate reason that markdown images wonโ€™t render on the same line as a <p>?

2 Likes

This is part of the CommonMark spec

**test**

<p>**test**</p>

Absolutely do not want to deviate from the spec here. I guess we fix pull hotlink images to allow for this by injecting 2 newlines for cases like this. I think it is rather rare though and sort of self inflicted.

4 Likes

I donโ€™t think itโ€™s that rare, especially when Discourse is associated to popular tools such as WP-Discourse or any tools which uses the API.

Please consider to add a blank line. It does not seems that would be a breaking change and fairly easy to implement. :pray:

1 Like

@Arkshine we have been discussing this a lot internally. The key thing for us is to maintain the integrity of the content, so the newline solution will probably not happen.

But we will definitely be doing something - having the pull_hotlinked_images job destroy the images is not acceptable. Hope to have a solution soon :eyes:

4 Likes

A workaround for this issue is to prevent Discourse from downloading the remote images. This can be done by adding the image domain to the disabled image download domains site setting. It is also possible to prevent Discourse from downloading all remote images by disabling the download remote images to local site setting. See Fix broken images for posts created by the WP Discourse and RSS plugins for details.

3 Likes

In our case, we canโ€™t because weโ€™re using the official topic thumbnail component which requires a local image. We solved the issue by adding newlines before any <img> in the content before topic being created with WP-Discourse. Not a solution for everyone but it works for us. A bit sad Discourse doesnโ€™t support this legal usage.

But yes, if you are not tightened to a plugin/component and/or canโ€™t fix the content before topic is created, this is for sure a reasonable workaround.

1 Like

We are still planning to fix the issue. Unfortunately it is a problem quite deep in our markdown rendering system which is complex to fix. But we will get to it - sorry it is taking so long!

3 Likes