Problema di rendering Markdown con immagine circondata da HTML

Riguardo a Thumbnail generation & markdown rendering issue

Quando Discourse scarica e sostituisce un tag HTML immagine con la sua sintassi Markdown, nel nostro contesto ciò si traduce in:

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

Discourse non riesce a visualizzare l’immagine

Immagine

image

Per risolvere il problema, è necessaria almeno una riga vuota sopra:

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

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

Sarebbe possibile consentire il rendering di immagini Markdown circondate da HTML, per favore?

@david

5 Mi Piace

Proviamo questo su meta. Sto facendo il hotlink di questa immagine all’interno di un link:

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

Vediamo cosa succede quando l’immagine viene caricata…

3 Mi Piace

@Arkshine sembra che abbia funzionato correttamente: sta rendendo correttamente <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a>.

Puoi condividere un po’ più della struttura HTML che circonda il link?

2 Mi Piace
Non formattato
<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">Acquista</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;Pubblicato su:&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;">Che siate giocatori o che lavoriate semplicemente seduti tutto il giorno e la schiena vi stia chiedendo pietà per una sedia migliore, ecco un'altra offerta esclusiva a un prezzo stracciato!<br />
Sedia da gaming di lusso, cuffie da gaming e spedizione rapida gratuita, con garanzia ufficiale dell'importatore &amp;#8211; solo a 679₪!!!</p>
<p style="text-align: center;">Usate in cassa il coupon esclusivo &amp;#8211; <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">Sedia da gaming professionale SPARKFOX GC60P</h3>
</div>
<div>Sedia da gaming con design speciale per giochi al computer, per il massimo comfort dell'utente</div>
<div>
<ul>
<li>Sedia con schienale alto</li>
<li>Massimo comfort per lunghe sessioni di gioco</li>
<li>Due cuscini di supporto per collo e zona lombare</li>
<li>Tipo di materiale: schiuma stampata</li>
<li>Tipo di struttura: metallo</li>
<li>Materiale: pelle con fibre di carbonio</li>
<li>Braccioli: regolabili su/giù</li>
<li>Tipo di meccanismo: farfalla</li>
<li>Tipo di elevazione: idraulica Class4</li>
<li>Range di inclinazione dello schienale: 90°-180°</li>
<li>Tipo di base: nylon</li>
<li>Materiale delle ruote: nylon</li>
<li>Capacità di carico: fino a 150 kg</li>
<li>Garanzia: un anno</li>
</ul>
<div><strong>Dimensioni</strong></div>
<div>
<ul>
<li>Larghezza: 67 cm</li>
<li>Profondità: 67 cm</li>
<li>Altezza variabile: 124-132 cm</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">Cuffie da gaming SPARKFOX K1</h3>
<div>Cuffie da gaming con design speciale per massimo comfort nell'ascolto e nella voce e cancellazione del rumore di fondo</div>
<div>
<ul>
<li>Compatibili con la maggior parte delle console disponibili sul mercato</li>
<li>Ascolto e gestione delle chiamate su telefoni e computer portatili</li>
<li>Regolatore del volume sul cavo delle cuffie per un accesso comodo</li>
<li>Audio eccellente grazie a driver da 50 mm</li>
<li>Comandi per il volume e il silenzio</li>
<li>Coppe auricolari grandi e imbottite per il massimo comfort</li>
<li>Cerchio auricolare regolabile per un adattamento perfetto alla vostra testa</li>
<li>Si collega direttamente all'uscita jack da 3,5 mm</li>
</ul>
</div>
<div>Incluso un adattatore speciale per collegare le cuffie a un computer fisso tramite un divisore jack da 3,5 mm a 2 uscite da 3,5 mm</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Formattato
<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">Acquista</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;Pubblicato su:&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;">
    Che siate giocatori o che lavoriate semplicemente seduti tutto il giorno e la schiena vi stia chiedendo pietà per una sedia migliore, ecco un'altra offerta esclusiva a un prezzo stracciato!<br />
    Sedia da gaming di lusso, cuffie da gaming e spedizione rapida gratuita, con garanzia ufficiale dell'importatore &amp;#8211; solo a 679₪!!!
</p>
<p style="text-align: center;">Usate in cassa il coupon esclusivo &amp;#8211; <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">Sedia da gaming professionale SPARKFOX GC60P</h3>
</div>
<div>Sedia da gaming con design speciale per giochi al computer, per il massimo comfort dell'utente</div>
<div>
    <ul>
        <li>Sedia con schienale alto</li>
        <li>Massimo comfort per lunghe sessioni di gioco</li>
        <li>Due cuscini di supporto per collo e zona lombare</li>
        <li>Tipo di materiale: schiuma stampata</li>
        <li>Tipo di struttura: metallo</li>
        <li>Materiale: pelle con fibre di carbonio</li>
        <li>Braccioli: regolabili su/giù</li>
        <li>Tipo di meccanismo: farfalla</li>
        <li>Tipo di elevazione: idraulica Class4</li>
        <li>Range di inclinazione dello schienale: 90°-180°</li>
        <li>Tipo di base: nylon</li>
        <li>Materiale delle ruote: nylon</li>
        <li>Capacità di carico: fino a 150 kg</li>
        <li>Garanzia: un anno</li>
    </ul>
    <div><strong>Dimensioni</strong></div>
    <div>
        <ul>
            <li>Larghezza: 67 cm</li>
            <li>Profondità: 67 cm</li>
            <li>Altezza variabile: 124-132 cm</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">Cuffie da gaming SPARKFOX K1</h3>
        <div>Cuffie da gaming con design speciale per massimo comfort nell'ascolto e nella voce e cancellazione del rumore di fondo</div>
        <div>
            <ul>
                <li>Compatibili con la maggior parte delle console disponibili sul mercato</li>
                <li>Ascolto e gestione delle chiamate su telefoni e computer portatili</li>
                <li>Regolatore del volume sul cavo delle cuffie per un accesso comodo</li>
                <li>Audio eccellente grazie a driver da 50 mm</li>
                <li>Comandi per il volume e il silenzio</li>
                <li>Coppe auricolari grandi e imbottite per il massimo comfort</li>
                <li>Cerchio auricolare regolabile per un adattamento perfetto alla vostra testa</li>
                <li>Si collega direttamente all'uscita jack da 3,5 mm</li>
            </ul>
        </div>
        <div>Incluso un adattatore speciale per collegare le cuffie a un computer fisso tramite un divisore jack da 3,5 mm a 2 uscite da 3,5 mm</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Screenshot dell'editor

1 Mi Piace

Questo è lo stesso problema sollevato qui: Images not publishing to Discourse in WP 5.3 - #6 by simon

3 Mi Piace

Ah! @simon, l’aggiornamento del plugin di WordPress risolverà i vecchi post? O solo quelli nuovi?

3 Mi Piace

La correzione si applica solo ai post pubblicati con l’editor a blocchi di WordPress. Correggerà i post vecchi se si clicca sul pulsante “Aggiorna argomento Discourse” su WordPress. Dovrà essere eseguita manualmente per ogni post, a meno che qualcuno non scriva uno script per scorrere i post vecchi.

4 Mi Piace

Proviamo questo HTML:

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

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

4 Mi Piace

Penso che anche questo dovrebbe essere corretto in Discourse, nel caso in cui i post vengano creati da un’integrazione non WordPress. In sintesi:

  1. Ho pubblicato <p><img src="..."/></p>. Questo è HTML perfettamente valido.

  2. pull_hotlinked_images ha recuperato l’immagine e ha sostituito il markup con <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>.

  3. Questo non viene renderizzato.

Ci sono quindi due possibili soluzioni. O:

  • Correggiamo InlineUploads in modo che aggiunga una riga vuota nel markup. In questo modo la renderizzazione funziona correttamente:
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

O

@sam, sai se c’è un motivo intenzionale per cui le immagini markdown non vengono renderizzate sulla stessa riga di un <p>?

3 Mi Piace

Questa è parte della specifica CommonMark

**test**

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

Non vogliamo assolutamente discostarci dalla specifica qui. Immagino che possiamo risolvere il problema dei link diretti alle immagini inserendo due nuove righe per casi come questo. Penso però che sia piuttosto raro e in un certo senso autoinflitto.

5 Mi Piace

Non credo sia così raro, specialmente quando Discourse è associato a strumenti popolari come WP-Discourse o a qualsiasi strumento che utilizza l’API.

Ti chiedo di valutare l’aggiunta di una riga vuota. Non sembra che ciò comporterebbe un cambiamento di rottura ed è abbastanza semplice da implementare. :pray:

3 Mi Piace

@Arkshine ne abbiamo discusso molto internamente. Per noi la cosa fondamentale è mantenere l’integrità dei contenuti, quindi la soluzione con le nuove righe probabilmente non avverrà.

Tuttavia, faremo sicuramente qualcosa: il fatto che il lavoro pull_hotlinked_images distrugga le immagini non è accettabile. Speriamo di trovare una soluzione presto :eyes:

5 Mi Piace

Una soluzione temporanea per questo problema consiste nell’impedire a Discourse di scaricare le immagini remote. Ciò può essere fatto aggiungendo il dominio delle immagini all’impostazione del sito disabled image download domains. È anche possibile impedire a Discourse di scaricare tutte le immagini remote disabilitando l’impostazione del sito download remote images to local. Per ulteriori dettagli, consulta Fix broken images for posts created by the WP Discourse and RSS plugins.

4 Mi Piace

Nel nostro caso, non possiamo farlo perché stiamo utilizzando il componente ufficiale per le miniature degli argomenti, che richiede un’immagine locale. Abbiamo risolto il problema aggiungendo delle interruzioni di riga prima di ogni <img> nel contenuto, prima che l’argomento venga creato tramite WP-Discourse. Non è una soluzione adatta a tutti, ma per noi funziona. È un po’ triste che Discourse non supporti questo utilizzo legittimo.

Ma sì, se non sei vincolato a un plugin/componente e/o non puoi modificare il contenuto prima che l’argomento venga creato, questa è sicuramente una soluzione ragionevole.

2 Mi Piace

Stiamo ancora pianificando di risolvere il problema. Purtroppo si tratta di un problema piuttosto profondo nel nostro sistema di rendering Markdown, che è complesso da correggere. Ma ci arriveremo - scusa che stia richiedendo così tanto tempo!

5 Mi Piace

Aggiungo solo una nota qui: il problema riguarda anche i post con immagini creati tramite il plugin RSS di Discourse.

6 Mi Piace

Scusa per i numerosi post in questo argomento, ma il problema riguarda anche le immagini nei post creati tramite il nostro plugin Zendesk quando l’impostazione sync comments from zendesk è abilitata. La difficoltà in questo caso è che non è possibile conoscere in anticipo la fonte delle immagini, quindi l’alternativa di aggiungere l’URL dell’immagine all’impostazione disabled image download domains non funzionerà.

Esiste un modo per impedire il download delle immagini remote sul locale se il tag immagine è racchiuso in tag HTML?

1 Mi Piace

Temo che questa opzione sia completamente fuori discussione; se facessimo qualcosa del genere, permetteremmo a terze parti di tracciare l’utilizzo su un forum iniettando un’immagine di tracciamento. Il download delle immagini remote è una funzione di sicurezza.

Invece, penso che abbiamo bisogno di un sistema “più intelligente” che funzioni in modo simile a come @tgxworld ha implementato i nostri mappatori di immagini alcuni anni fa, uno che opera all’indietro partendo dall’HTML e garantisce la stabilità della modifica attraverso una nuova cottura. Purtroppo, si tratta di una modifica molto complessa.

4 Mi Piace

Questo problema è riemerso

Sto solo pensando ad alta voce, ma mi chiedo se possiamo evitare il problema complesso qui (cioè la conversione da HTML a Markdown). Per riassumere (solo per aiutarmi a ragionare su questo)

  1. Discourse supporta l’importazione di HTML per la creazione del contenuto dei post (ad esempio HTML da WP Discourse).

  2. In alcuni contesti, l’utente si aspetta che l’integrità dell’HTML originale venga mantenuta esattamente.

  3. “Integrità” qui ha almeno due aspetti:

    1. Come viene renderizzato il contenuto, ad esempio i ritorni a capo
    2. Dove sono ospitati i media, ad esempio il download delle immagini in locale per evitare immagini rotte o potenzialmente per motivi di sicurezza
  4. La conversione da HTML a Markdown potenzialmente crea problemi per il primo tipo di integrità, ma è attualmente necessaria per garantire il secondo tipo di integrità.

Quindi, forse un modo per affrontare questo problema per determinati post importati sarebbe salvare l’HTML importato direttamente come contenuto cotto del post, e il job pull_hotlinked_images supporterebbe il download delle immagini in tale contenuto senza convertire img in Markdown.

Sì, più semplicemente, forse il codice potrebbe supportare il download delle immagini collegate senza richiedere la conversione di img in Markdown. Per tali post, interpoleresti l’URL dell’immagine scaricata nel contenuto cotto invece che nel contenuto grezzo.

3 Mi Piace

La cosa complicata è: come potresti mai modificare i post con quel flag? L’editor si troverebbe in modalità HTML grezzo e l’intera barra degli strumenti non funzionerebbe, ecc.

1 Mi Piace