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_Cossar 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