Insérer des images dans Hugo

[ColinMaudry]

PNG, JPEG

1. Sauvegarder l'image dans [racine du projet]/static/img (ces dossiers n'existent pas par défaut)
2. Dans le markdown : {{< figure src="/decp-docs/img/image.png" title="Mon image" >}}

SVG

Pour insérer des balises HTML ou SVG dans le markdown et qu'elles soient interprétées par Hugo, il faut modifier config.yaml :

markup:
  defaultMarkdownHandler: goldmark
  goldmark:
    renderer:
      unsafe: true

Voir la doc officielle

Ensuite on peut

• soit utiliser le shortcode Hugo figure décrit ci-dessus, mais les liens hypertextes dans le SVG seront inactifs
• soit copier le SVG directement, mais cela peut être très verbeux, et il faut copier le contenu dans le markdown à chaque modification du dessin

Dessin draw.io

Draw.io permet d'intégrer les dessins de plusieurs manières. En plus de télécharger un fichier image (JPEG, PNG ou SVG), il est possible d'intégrer du code HTML et JavaScript qui interprète le dessin, encodé en base64 :

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:     &quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers              lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams.       net\&quot; modified=\&quot;2020-09-07T09:01:07.563Z\&quot; agent=\&quot;5.0 (X11)\&quot; etag=\&quot;               _qclodUT4bsLZwi-tAGX\&quot; version=\&quot;13.6.6\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;        YwVPcnQrtgQc1rpSdtJS\&quot; name=\&quot;Page-1\&quot;&gt;7Vpbc5s4GP01nu4+2AMIsHl0HDubTrPp1t1p+iiDbJTIiAoR2/         31K4GwuSi14/rWbNsZB30IAed8d9ECg/nyhsE4vKMBIi3LCJYtcN2yLBP0LPFHSla5xHPMXDBjOFCTNoIx/                                 o6U0FDSFAcoqUzklBKO46rQp1GEfF6RQcboojptSkn1rjGcoYZg7EPSlH7BAQ9zac/qbuR/ITwLizubrpefmcNisnqTJIQBXZREYNgCA0Ypz4/      mywEiErwCl/y60Qtn1w/GUMR3uSBc3N7Nb8E/V49fRu/                                                                        B4vP3h5C0gVrmGZJUvbF6Wr4qIGA0jQIkVzFa4GoRYo7GMfTl2YUgXchCPidiZIrDhDP6tIZKvOTVlEZc8Wq66xkDSijL1gf97L84E8AkzO4jF5piQopJEY3E5VfNNy6eHjGOliWRQuAG0TnibCWmqLM9RYbSRstQ48WG2y5QsrDE65pFqPRptl56A7k4UKhnw38TxO4nj1IrLYPACSIFwC7hCpgK0u63lBYn2kkGWV9MMN14mb19cT5T9wK+jRCYwACjUVnkztTf7IbpnnfLVxlhP8SIJbmxJZQIxRqAVt+                                                TEmmj4lcYYS7LhihJBFNYAJKfRRkO2fXzOYyycZxOCP4mdE89o8AwrT+                                                            3kOVYFWJJBMHRk1JszqUz6EserNFisegEkMPOjKbPnSmTF8sfKUsQFw8ycvzA6U6mbm9i+7bZ9SzPQxMDedkC1jaTKSuYMrF9jUXqLRa+pk/        wLBIyTmOtCTVMpjvsu0NDY1wHMBG7W7MRt2kjwNLYiLmHjYhhyUxe4bhMp+                                                         GnUCA8txpSxkM6oxEkw430qkrOZs4HKoHPKHlEnK8UojDltEpYHW6BMls9yPU6TjH8quZmg+ululk+WhWjJeYPxTxx/                         HWzhBhtLpKD4pqmWrxIdkJT5qMfoKecPIdshvg2XReGHFSCZFN1GCKQ4+dqzNSpgbr0I8WZ71Mq5xhVlQN1TcofVF1VU6b1Y+zjgwP8/            FNO8Rf15QPMfIIGt6/yumtxBtouvtjPbuPjjnD4YjgLxY8JvAli/kqug/                                                           y4zeAc7uB1rcN53WP4zJoCr31oyWeatsZnOid0md2jp3onjVOeVw1TttkMU6apCVOm92rMd4xJxttC2DRqEDsaiK3TQgzOEfY3Yb4c5Esx/         4Uw30gXVNjfhPp1snCSsF+Yw9a4b50m7tfLMdusucP8jRpxv88YXJWmxXJC8or7eE5NE/MVd0wqdlTVZmn9HqXLohCq1UqKO8v4o387GrYscU/      j43Asfu8g88N8Zi6OGRXFcVZRvYN+iDhK2Z8/52gushBZ1xOnKER25NTTePifzgDzVOr9+                                              P7vH1a8JXKTEMbyUKiCL6rs7QRPoP80y1TiPuUiXUPHy4XMmrEBoOmxaFgDxyLN0oXlA5H2cPfhLXBmdS+NM11f8rehVUhzaunZ+UmzfhvaNs68S+   MMHI+z+8H1+C2Q5vacCyPtLM3PQ1VBB21k2q0zVTT/                                                                          j02ffCeFwSggKxpl2ykH2qeprZx3CB9FgdQOUFsWR0jWRaO5rH5QO9sm8tsSfRpTgtryInEaR1Pa2qF7aJfYvrz2IaiVp5pCZ51Vlx1M94TdQ8ttBArYKcy05IcIwXGCtsMIkzjfr5/ipYS+gWt5A1joeQBRb+rralDX76HJ9ECJsGt1qs7e7nYbZABH4+                                          ydYzn7XgP4Saf31oB3ulYd9oKIcwHvNHCv7ivXCBAvylua9m3tIwaoWiy+wAoxTe9ljoOAvMRj1VNtYW6a/TuQi3LtCj+mp/                    FRpsZHHa0XA86TBGlbuOuurbaFu+8u8fZvafZPnMDvxOmoidMN5mE6OVi2NMuWU1mSfgt1l29XwGXnQfVtVOcSt1FBMxHyqWzpnz8eVD+           gO11wsO1qV8Oxm7zpaDtEbPgUPt97UUQDevf5arQcfhpP79rN7uGyYzQY+sVTplrV4GpAP1a+pAX9AN0/W3jThiuN0nm+/cVEqae+               InyHI4Ft6nMsy0Dh4BlDSUyjAAoryrfJnilm8hQWBWUi4mGyayvqlYZL0JSfwWyzeeqhrQNoU7euTdr8W9fm2u+zv82Hz/mG6+bzcTD8Dw==&lt;/   diagram&gt;&lt;/mxfile&gt;&quot;}"></div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer-static.min.js"></script>

Comme pour l'intégration de balises SVG, c'est assez verbeux et il faut manuellement mettre le mardown à jour, mais on bénéficie alors des contrôles JavaScript de draw.io (zoom, plein écran, etc.)

J'ai réussi à faire fonctionner une iframe avec un fichier HTML exporté depuis draw.io dans /static/static/html (sic) (<iframe src="/decp-docs/html/processus-decp-rama.html"/>). Ce n'est cependant pas très pratique car les dimensions de l'iframe ne s'adaptent pas aux dimensions du contenu.

[ColinMaudry]

Je n'ai donc pas encore réussi à intégrer un dessin draw.io :

• sous forme de fichier référencé dans le Markdown plutôt que sous forme de contenu intégré
• avec les liens hypertextes fonctionnels

La méthode retenue pour l'instant est l'intégration du snippet HTML+Base64 décrit ci-dessus.