Problème de rendu Markdown avec une image entourée de HTML

Relatif à Thumbnail generation & markdown rendering issue

Lorsque Discourse télécharge et remplace une balise HTML d’image par sa syntaxe Markdown — dans notre contexte, cela donne :

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

Discourse ne parvient pas à afficher l’image.

Image

image

Pour corriger le problème, il faut au moins une ligne vide au-dessus :

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

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

Serait-il possible de permettre l’affichage d’une image Markdown entourée de HTML, s’il vous plaît ?

@david

5 « J'aime »

Essayons cela sur Meta. Je fais un lien direct vers cette image à l’intérieur d’un lien :

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

Voyons ce qui se passe lorsque l’image est récupérée…

3 « J'aime »

@Arkshine cela semble avoir fonctionné correctement — il rend correctement <a href="https://discourse.org">![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</a>.

Peux-tu partager un peu plus de la structure HTML entourant le lien ?

2 « J'aime »
Non formaté
<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">Acheter</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;Publié sur:&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;">Que vous soyez gamer ou que vous travailliez simplement assis toute la journée et que votre dos réclame déjà une meilleure chaise, voici une nouvelle offre exclusive à un prix d'enlèvement !<br />
Chaise de gaming confortable, casque de gaming et livraison rapide gratuite, avec garantie du fabricant officiel &#8211; seulement 679 ₪ !!!</p>
<p style="text-align: center;">Utilisez le code promo exclusif en caisse &#8211; <strong>GLA679</strong></p>
<div> ![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
<h3 style="text-align: center;">Chaise de gaming professionnelle SPARKFOX GC60P</h3>
</div>
<div>Chaise de gaming au design spécial pour les jeux PC, offrant un confort maximal à l'utilisateur</div>
<div>
<ul>
<li>Siège avec dossier haut</li>
<li>Confort maximal pour de longues sessions de jeu</li>
<li>Deux coussins de soutien pour le cou et le bas du dos</li>
<li>Type de matériau : mousse moulée</li>
<li>Type de structure : métal</li>
<li>Matériau : cuir avec fibres de carbone</li>
<li>Accoudoirs : réglables haut/bas</li>
<li>Type de mécanisme : papillon</li>
<li>Type de levage : hydraulique Classe 4</li>
<li>Plage d'inclinaison du dossier : 90°-180°</li>
<li>Type de base : nylon</li>
<li>Matériau des roulettes : nylon</li>
<li>Capacité de charge : jusqu'à 150 kg</li>
<li>Garantie : un an</li>
</ul>
<div><strong>Dimensions</strong></div>
<div>
<ul>
<li>Largeur : 67 cm</li>
<li>Profondeur : 67 cm</li>
<li>Hauteur réglable : 124-132 cm</li>
</ul>
<h3></h3>
<p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
<h3 style="text-align: center;">Casque de gaming SPARKFOX K1</h3>
<div>Casque de gaming au design spécial pour un confort maximal lors de l'écoute et de la parole, avec réduction du bruit ambiant</div>
<div>
<ul>
<li>Compatible avec la plupart des consoles disponibles sur le marché</li>
<li>Écoute et gestion d'appels sur téléphones et ordinateurs portables</li>
<li>Contrôle du volume situé sur le câble du casque pour un accès facile</li>
<li>Excellente qualité sonore grâce à des haut-parleurs de 50 mm</li>
<li>Contrôles du volume et de la coupure du son</li>
<li>Coussinets d'oreille larges et rembourrés pour un confort optimal</li>
<li>Arceau réglable pour un ajustement parfait à votre tête</li>
<li>Connexion directe à la prise jack 3,5 mm</li>
</ul>
</div>
<div>Un adaptateur spécial est inclus pour connecter le casque à un ordinateur de bureau via un séparateur jack 3,5 mm vers 2 prises jack 3,5 mm</div>
</div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Formaté
<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">Acheter</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;Publié sur:&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;">
    Que vous soyez gamer ou que vous travailliez simplement assis toute la journée et que votre dos réclame déjà une meilleure chaise, voici une nouvelle offre exclusive à un prix d'enlèvement !<br />
    Chaise de gaming confortable, casque de gaming et livraison rapide gratuite, avec garantie du fabricant officiel &#8211; seulement 679 ₪ !!!
</p>
<p style="text-align: center;">Utilisez le code promo exclusif en caisse &#8211; <strong>GLA679</strong></p>
<div>![](upload://3c2tvGxZnMqoIn2fVfHA02wocm.jpeg)</div>
<div>
    <h3 style="text-align: center;">Chaise de gaming professionnelle SPARKFOX GC60P</h3>
</div>
<div>Chaise de gaming au design spécial pour les jeux PC, offrant un confort maximal à l'utilisateur</div>
<div>
    <ul>
        <li>Siège avec dossier haut</li>
        <li>Confort maximal pour de longues sessions de jeu</li>
        <li>Deux coussins de soutien pour le cou et le bas du dos</li>
        <li>Type de matériau : mousse moulée</li>
        <li>Type de structure : métal</li>
        <li>Matériau : cuir avec fibres de carbone</li>
        <li>Accoudoirs : réglables haut/bas</li>
        <li>Type de mécanisme : papillon</li>
        <li>Type de levage : hydraulique Classe 4</li>
        <li>Plage d'inclinaison du dossier : 90°-180°</li>
        <li>Type de base : nylon</li>
        <li>Matériau des roulettes : nylon</li>
        <li>Capacité de charge : jusqu'à 150 kg</li>
        <li>Garantie : un an</li>
    </ul>
    <div><strong>Dimensions</strong></div>
    <div>
        <ul>
            <li>Largeur : 67 cm</li>
            <li>Profondeur : 67 cm</li>
            <li>Hauteur réglable : 124-132 cm</li>
        </ul>
        <h3></h3>
        <p>![](upload://7t26ZtW6tL3vobWYqbpCbRftvpV.jpeg)</p>
        <h3 style="text-align: center;">Casque de gaming SPARKFOX K1</h3>
        <div>Casque de gaming au design spécial pour un confort maximal lors de l'écoute et de la parole, avec réduction du bruit ambiant</div>
        <div>
            <ul>
                <li>Compatible avec la plupart des consoles disponibles sur le marché</li>
                <li>Écoute et gestion d'appels sur téléphones et ordinateurs portables</li>
                <li>Contrôle du volume situé sur le câble du casque pour un accès facile</li>
                <li>Excellente qualité sonore grâce à des haut-parleurs de 50 mm</li>
                <li>Contrôles du volume et de la coupure du son</li>
                <li>Coussinets d'oreille larges et rembourrés pour un confort optimal</li>
                <li>Arceau réglable pour un ajustement parfait à votre tête</li>
                <li>Connexion directe à la prise jack 3,5 mm</li>
            </ul>
        </div>
        <div>Un adaptateur spécial est inclus pour connecter le casque à un ordinateur de bureau via un séparateur jack 3,5 mm vers 2 prises jack 3,5 mm</div>
    </div>
</div>
<p>&nbsp;</p>
<div data-custom-html=""></div>
Capture d'écran de l'éditeur

1 « J'aime »

C’est le même problème que celui soulevé ici : Images not publishing to Discourse in WP 5.3 - #6 by simon

3 « J'aime »

Aha ! @simon, la mise à jour du plugin WordPress corrigera-t-elle les anciens articles ? Ou seulement les nouveaux ?

3 « J'aime »

La correction ne s’applique qu’aux publications créées avec l’éditeur de blocs WordPress. Elle corrigera les anciennes publications si le bouton « Mettre à jour le sujet Discourse » est cliqué dans WordPress. Cela devra être fait manuellement pour chaque publication, sauf si quelqu’un écrit un script pour parcourir les anciennes publications.

4 « J'aime »

Essayons ce code HTML :

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

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

4 « J'aime »

Je pense que cela devrait également être corrigé dans Discourse, au cas où des messages seraient publiés par une intégration autre que WordPress. Pour résumer :

  1. J’ai posté <p><img src="..."/></p>. Ceci est du HTML parfaitement valide.

  2. pull_hotlinked_images a récupéré l’image et a remplacé le balisage par <p>![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)</p>.

  3. Cela ne s’affiche pas.

Il y a donc deux correctifs possibles ici. Soit :

  • Nous corrigeons InlineUploads pour qu’il ajoute une ligne vide dans le balisage. Cela s’affiche correctement :
    <p>
    
    ![](upload://6zqK52dO23i1JsYH2oyMU12U2ro.jpeg)
    </p>
    

OU

@sam sais-tu s’il existe une raison délibérée pour laquelle les images Markdown ne s’affichent pas sur la même ligne qu’un <p> ?

3 « J'aime »

Cela fait partie de la spécification CommonMark

**test**

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

Nous ne souhaitons absolument pas nous écarter de la spécification ici. Je suppose que nous devons corriger le hotlink des images en tirant parti de l’insertion de deux sauts de ligne pour des cas comme celui-ci. Je pense que c’est plutôt rare, mais en quelque sorte auto-infligé.

5 « J'aime »

Je ne pense pas que ce soit si rare, surtout lorsque Discourse est associé à des outils populaires comme WP-Discourse ou tout autre outil utilisant l’API.

Veuillez envisager d’ajouter une ligne vide. Cela ne semble pas constituer une modification incompatible et serait assez simple à mettre en œuvre. :pray:

3 « J'aime »

@Arkshine nous en avons beaucoup discuté en interne. L’élément clé pour nous est de maintenir l’intégrité du contenu, donc la solution avec les sauts de ligne ne sera probablement pas mise en œuvre.

Cependant, nous ferons certainement quelque chose : le fait que le travail pull_hotlinked_images détruise les images n’est pas acceptable. Nous espérons avoir une solution bientôt :eyes:

5 « J'aime »

Une solution de contournement à ce problème consiste à empêcher Discourse de télécharger les images distantes. Cela peut être fait en ajoutant le domaine de l’image au paramètre du site « domaines d’images désactivés pour le téléchargement ». Il est également possible d’empêcher Discourse de télécharger toutes les images distantes en désactivant le paramètre du site « télécharger les images distantes localement ». Voir Fix broken images for posts created by the WP Discourse and RSS plugins pour plus de détails.

4 « J'aime »

Dans notre cas, nous ne pouvons pas le faire car nous utilisons le composant officiel de vignette de sujet qui nécessite une image locale. Nous avons résolu le problème en ajoutant des sauts de ligne avant tout balise dans le contenu avant la création du sujet avec WP-Discourse. Ce n’est pas une solution pour tout le monde, mais cela fonctionne pour nous. C’est un peu dommage que Discourse ne prenne pas en charge cette utilisation légale.

Mais oui, si vous n’êtes pas contraint par un plugin/composant et/ou ne pouvez pas modifier le contenu avant la création du sujet, c’est certainement une solution de contournement raisonnable.

2 « J'aime »

Nous prévoyons toujours de résoudre le problème. Malheureusement, il s’agit d’un problème profondément enraciné dans notre système de rendu Markdown, ce qui le rend complexe à corriger. Mais nous nous en occuperons – désolé que cela prenne autant de temps !

5 « J'aime »

Je tiens simplement à ajouter une note ici : le problème affecte également les publications avec images créées via le plugin Discourse RSS.

6 « J'aime »

Désolé pour les multiples publications dans ce sujet, mais le problème affecte également les images dans les posts créés via notre plugin Zendesk lorsque le paramètre « synchroniser les commentaires depuis Zendesk » est activé. La difficulté dans ce cas est qu’il n’est pas possible de connaître à l’avance la source des images, de sorte que la solution de contournement consistant à ajouter la source de l’image au paramètre « domaines de téléchargement d’images désactivés » ne fonctionnera pas.

Existe-t-il un moyen d’empêcher le téléchargement des images distantes vers le local si la balise image est enveloppée dans des balises HTML ?

1 « J'aime »

Je crains que cela soit tout simplement hors de question. Si nous faisions une telle chose, nous permettrions à des tiers de suivre l’activité sur un forum en injectant un gif de suivi. Le téléchargement des images distantes fait partie des fonctionnalités de sécurité.

À la place, je pense qu’il nous faut un système plus « intelligent », fonctionnant de manière similaire à celle utilisée par @tgxworld pour nos remappeurs d’images il y a quelques années. Un système qui remonte depuis le HTML et assure la stabilité du changement en relançant le processus de cuisson. Malheureusement, il s’agit d’une modification très complexe.

4 « J'aime »

Ce problème est réapparu

Je réfléchis à voix haute, mais je me demande si nous ne pourrions pas contourner ce problème épineux (à savoir la conversion du HTML en Markdown). Pour résumer (juste pour aider à y réfléchir)

  1. Discourse prend en charge l’importation de HTML pour créer le contenu des publications (par exemple, le HTML provenant de WP Discourse).

  2. Dans certains contextes, l’utilisateur s’attend à ce que l’intégrité du HTML original soit préservée à l’identique.

  3. L’« intégrité » ici comprend au moins deux aspects :

    1. La manière dont le contenu est rendu, par exemple les sauts de ligne.
    2. L’emplacement où les médias sont hébergés, par exemple le téléchargement des images en local pour éviter les images brisées, ou potentiellement pour des raisons de sécurité.
  4. La conversion du HTML en Markdown peut créer des problèmes pour le premier type d’intégrité, mais elle est actuellement nécessaire pour garantir le second type d’intégrité.

Ainsi, une façon possible de résoudre ce problème pour certaines publications importées serait de stocker directement le HTML importé comme contenu « cuit » de la publication, et le job pull_hotlinked_images prendrait en charge le téléchargement des images dans un tel contenu sans convertir les balises img en Markdown.

Oui, pour le dire plus simplement, le code pourrait peut-être prendre en charge le téléchargement des images liées sans exiger la conversion des balises img en Markdown. Pour de telles publications, vous interpoleriez l’URL de l’image téléchargée dans le contenu cuit plutôt que dans le contenu brut.

3 « J'aime »

Le problème, c’est que comment pourriez-vous jamais modifier des posts avec ce drapeau ? L’éditeur serait en mode HTML brut et toute la barre d’outils serait cassée, etc.

1 « J'aime »