Markdown-Darstellungsproblem mit Bild, das von HTML umgeben ist

Bezüglich Thumbnail generation & markdown rendering issue

Wenn Discourse ein Bild herunterlädt und den HTML-Code durch die Markdown-Syntax ersetzt – in unserem Fall ergibt sich folgendes:

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

Discourse kann das Bild nicht rendern.

Bild

image

Um das Problem zu beheben, ist mindestens eine leere Zeile darüber erforderlich:

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

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

Wäre es möglich, das Rendern von Markdown-Bildern, die von HTML umgeben sind, zu erlauben?

@david

5 „Gefällt mir“

Lass uns das bei Meta ausprobieren. Ich verlinke dieses Bild direkt innerhalb eines Links:

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

Mal sehen, was passiert, wenn das Bild geladen wird…

3 „Gefällt mir“

@Arkshine das scheint gut funktioniert zu haben – es wird erfolgreich als <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a> gerendert.

Könntest du etwas mehr von der HTML-Struktur um den Link herum teilen?

2 „Gefällt mir“
Unformatiert
<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">Kaufen</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;Veröffentlicht am:&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;">Egal ob Sie Gamer sind oder einfach nur den ganzen Tag arbeiten und sitzen und Ihr Rücken bereits nach einem besseren Stuhl schreit – hier ist ein weiteres exklusives Angebot zum Schnäppchenpreis!<br />
Ein verwöhnender Gaming-Stuhl, Gaming-Headset und kostenloser Expressversand mit offizieller Herstellergarantie – nur für 679₪!!!</p>
<p style="text-align: center;">Verwenden Sie am Kassenbereich den exklusiven Gutschein – <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">Professioneller Gaming-Stuhl SPARKFOX GC60P</h3>
</div>
<div>Gaming-Stuhl mit speziellem Design für PC-Spiele für maximalen Komfort des Benutzers</div>
<div>
<ul>
<li>Stuhl mit hoher Rückenlehne</li>
<li>Maximaler Komfort für lange Spielzeiten</li>
<li>Ein Paar Kissen zur Unterstützung von Nacken und unterem Rücken</li>
<li>Materialtyp: gegossener Schaumstoff</li>
<li>Rahmentyp: Metall</li>
<li>Material: Leder mit Kohlefasern</li>
<li>Armlehnen: höhenverstellbar hoch/runter</li>
<li>Mechanismustyp: Schmetterling</li>
<li>Hebetyp: hydraulisch Class4</li>
<li>Bereich der Rückenlehne: 90°-180°</li>
<li>Basistyp: Nylon</li>
<li>Radmaterial: Nylon</li>
<li>Tragfähigkeit: bis zu 150 kg</li>
<li>Garantie: ein Jahr</li>
</ul>
<div><strong>Abmessungen</strong></div>
<div>
<ul>
<li>Breite: 67 cm</li>
<li>Tiefe: 67 cm</li>
<li>Verstellbare Höhe: 124-132 cm</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">Gaming-Headset SPARKFOX K1</h3>
<div>Gaming-Headset mit speziellem Design für maximalen Komfort beim Hören und Sprechen sowie zur Geräuschunterdrückung</div>
<div>
<ul>
<li>Kann mit den meisten auf dem Markt erhältlichen Konsolen verwendet werden</li>
<li>Audio und Anrufverwaltung an Telefonen und Laptops</li>
<li>Die Lautstärkeregelung befindet sich am Headset-Kabel für einfachen Zugriff</li>
<li>Ausgezeichneter Sound von großen 50-mm-Treibern</li>
<li>Steuerung für Lautstärke und Stummschaltung</li>
<li>Große, gepolsterte Ohrmuscheln für maximalen Komfort</li>
<li>Der Kopfbügel ist verstellbar für eine perfekte Anpassung an Ihren Kopf</li>
<li>Direkte Verbindung mit dem 3,5-mm-Controller-Ausgang</li>
</ul>
</div>
<div>Eine spezielle Adapter wird für den Anschluss des Headsets an einen Desktop-PC über einen 3,5-mm-Splitter für 2 x 3,5-mm-Ausgänge beigelegt.</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Formatiert
<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">Kaufen</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;Veröffentlicht am:&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;">
    Egal ob Sie Gamer sind oder einfach nur den ganzen Tag arbeiten und sitzen und Ihr Rücken bereits nach einem besseren Stuhl schreit – hier ist ein weiteres exklusives Angebot zum Schnäppchenpreis!<br />
    Ein verwöhnender Gaming-Stuhl, Gaming-Headset und kostenloser Expressversand mit offizieller Herstellergarantie – nur für 679₪!!!
</p>
<p style="text-align: center;">Verwenden Sie am Kassenbereich den exklusiven Gutschein – <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">Professioneller Gaming-Stuhl SPARKFOX GC60P</h3>
</div>
<div>Gaming-Stuhl mit speziellem Design für PC-Spiele für maximalen Komfort des Benutzers</div>
<div>
    <ul>
        <li>Stuhl mit hoher Rückenlehne</li>
        <li>Maximaler Komfort für lange Spielzeiten</li>
        <li>Ein Paar Kissen zur Unterstützung von Nacken und unterem Rücken</li>
        <li>Materialtyp: gegossener Schaumstoff</li>
        <li>Rahmentyp: Metall</li>
        <li>Material: Leder mit Kohlefasern</li>
        <li>Armlehnen: höhenverstellbar hoch/runter</li>
        <li>Mechanismustyp: Schmetterling</li>
        <li>Hebetyp: hydraulisch Class4</li>
        <li>Bereich der Rückenlehne: 90°-180°</li>
        <li>Basistyp: Nylon</li>
        <li>Radmaterial: Nylon</li>
        <li>Tragfähigkeit: bis zu 150 kg</li>
        <li>Garantie: ein Jahr</li>
    </ul>
    <div><strong>Abmessungen</strong></div>
    <div>
        <ul>
            <li>Breite: 67 cm</li>
            <li>Tiefe: 67 cm</li>
            <li>Verstellbare Höhe: 124-132 cm</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">Gaming-Headset SPARKFOX K1</h3>
        <div>Gaming-Headset mit speziellem Design für maximalen Komfort beim Hören und Sprechen sowie zur Geräuschunterdrückung</div>
        <div>
            <ul>
                <li>Kann mit den meisten auf dem Markt erhältlichen Konsolen verwendet werden</li>
                <li>Audio und Anrufverwaltung an Telefonen und Laptops</li>
                <li>Die Lautstärkeregelung befindet sich am Headset-Kabel für einfachen Zugriff</li>
                <li>Ausgezeichneter Sound von großen 50-mm-Treibern</li>
                <li>Steuerung für Lautstärke und Stummschaltung</li>
                <li>Große, gepolsterte Ohrmuscheln für maximalen Komfort</li>
                <li>Der Kopfbügel ist verstellbar für eine perfekte Anpassung an Ihren Kopf</li>
                <li>Direkte Verbindung mit dem 3,5-mm-Controller-Ausgang</li>
            </ul>
        </div>
        <div>Eine spezielle Adapter wird für den Anschluss des Headsets an einen Desktop-PC über einen 3,5-mm-Splitter für 2 x 3,5-mm-Ausgänge beigelegt.</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Screenshot des Editors

1 „Gefällt mir“

Dies ist das gleiche Problem, das hier angesprochen wird: Images not publishing to Discourse in WP 5.3 - #6 by simon

3 „Gefällt mir“

Aha! @simon, wird das Aktualisieren des WordPress-Plugins auch alte Beiträge beheben? Oder nur neue?

3 „Gefällt mir“

Die Korrektur gilt nur für Beiträge, die mit dem WordPress-Blockeditor veröffentlicht wurden. Sie wird auch alte Beiträge beheben, wenn in WordPress die Schaltfläche „Discourse-Thema aktualisieren

4 „Gefällt mir“

Versuchen wir dieses HTML:

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

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

4 „Gefällt mir“

Ich denke, das sollte auch in Discourse behoben werden, falls Beiträge von einer Nicht-WordPress-Integration stammen. Zusammengefasst:

  1. Ich habe <p><img src="..."/></p> gepostet. Das ist völlig gültiges HTML.

  2. pull_hotlinked_images hat das Bild heruntergeladen und den Markup durch <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p> ersetzt.

  3. Dies wird nicht dargestellt.

Es gibt also zwei mögliche Lösungen. Entweder:

  • Wir beheben InlineUploads, sodass es eine Leerzeile im Markup hinzufügt. Das wird korrekt dargestellt:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

ODER

@sam, weißt du, ob es einen absichtlichen Grund gibt, warum Markdown-Bilder nicht in derselben Zeile wie ein <p> dargestellt werden?

3 „Gefällt mir“

Dies ist Teil der CommonMark-Spezifikation.

**test**

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

Wir möchten uns auf keinen Fall von der Spezifikation abweichend verhalten. Ich schätze, wir beheben das Problem bei Pull-Hotlink-Bildern, indem wir in solchen Fällen zwei neue Zeilen einfügen. Ich denke, das ist jedoch eher selten und gewissermaßen selbstverschuldet.

5 „Gefällt mir“

Ich denke nicht, dass das so selten ist, besonders wenn Discourse mit beliebten Tools wie WP-Discourse oder anderen Tools, die die API nutzen, verknüpft ist.

Bitte erwäge, eine Leerzeile hinzuzufügen. Es scheint nicht, als wäre dies eine Breaking Change, und die Umsetzung wäre ziemlich einfach. :pray:

3 „Gefällt mir“

@Arkshine wir haben das intern sehr intensiv diskutiert. Das Wichtigste für uns ist die Integrität der Inhalte zu wahren, daher wird die Lösung mit den Zeilenumbrüchen wahrscheinlich nicht umgesetzt werden.

Aber wir werden definitiv etwas unternehmen – dass der Job pull_hotlinked_images die Bilder löscht, ist inakzeptabel. Hoffentlich haben wir bald eine Lösung :eyes:

5 „Gefällt mir“

Eine Workaround-Lösung für dieses Problem besteht darin, zu verhindern, dass Discourse die externen Bilder herunterlädt. Dies kann erreicht werden, indem die Domain der Bilder in der Site-Einstellung „disabled image download domains

4 „Gefällt mir“

In unserem Fall geht das nicht, da wir die offizielle Komponente für Themen-Thumbnail verwenden, die ein lokales Bild erfordert. Wir haben das Problem gelöst, indem wir vor jedem <img> im Inhalt vor der Erstellung des Themas mit WP-Discourse Zeilenumbrüche eingefügt haben. Das ist keine Lösung für alle, aber für uns funktioniert es. Es ist etwas schade, dass Discourse diese legale Nutzung nicht unterstützt.

Aber ja, wenn du nicht an ein Plugin/eine Komponente gebunden bist und/oder den Inhalt nicht vor der Erstellung des Themas anpassen kannst, ist das mit Sicherheit eine vernünftige Workaround-Lösung.

2 „Gefällt mir“

Wir planen weiterhin, das Problem zu beheben. Leider handelt es sich um ein Problem, das tief in unserem Markdown-Rendering-System steckt, was die Behebung komplex macht. Aber wir werden es schaffen – entschuldigen Sie bitte, dass es so lange dauert!

5 „Gefällt mir“

Ich füge hier nur eine Anmerkung hinzu, dass das Problem auch Beiträge betrifft, die über das Discourse RSS-Plugin mit Bildern erstellt wurden.

6 „Gefällt mir“

Entschuldigt bitte die mehreren Beiträge in diesem Thema, aber das Problem betrifft auch Bilder in Beiträgen, die über unser Zendesk-Plugin erstellt werden, wenn die Einstellung „Kommentare aus Zendesk synchronisieren

1 „Gefällt mir“

Ich fürchte, das kommt überhaupt nicht infrage. Wenn wir so etwas tun würden, könnten Dritte die Nutzung in einem Forum durch das Einschleusen eines Tracking-GIFs nachverfolgen. Das Herunterladen von Remote-Bildern ist ein Sicherheitsfeature.

Stattdessen glaube ich, dass wir ein „intelligenteres

4 „Gefällt mir“

Dieses Problem ist erneut aufgetreten

Ich denke hier einfach nur laut nach, aber ich frage mich, ob wir das knifflige Problem hier umgehen können (d. h. die Umwandlung von HTML in Markdown). Zur Erinnerung (nur um das Ganze besser durchdenken zu können):

  1. Discourse unterstützt die Importierung von HTML zur Erstellung von Beitragsinhalten (z. B. HTML aus WP Discourse).

  2. In einigen Kontexten erwartet der Nutzer, dass die Integrität des ursprünglichen HTML exakt erhalten bleibt.

  3. „Integrität

3 „Gefällt mir“

Das Tückische daran ist, wie man Beiträge mit diesem Flag jemals bearbeiten könnte. Der Editor würde im Raw-HTML-Modus sein und die gesamte Symbolleiste wäre kaputt, usw.

1 „Gefällt mir“