Insérer des Images dans Hugo

2 minute(s) Publié le

`figure` et `instagram` sont deux shortcodes prédéfinis pour faciliter l'insertion d'images dans un site web motorisé par Hugo.
Table des Matières

Hugo est livré avec un ensemble de shortcodes prédéfinis fournis pour la commodité de l’auteur et pour aider à maintenir un contenu markdown propre.

figure

figure est une extension de la syntaxe image en markdown, qui ne fournit pas de raccourci pour l’élément plus sémantique <figure> du HTML5.

Le shortcode figure peut utiliser les paramètres nommés suivants :

  • src
  • link
  • title
  • caption
  • class
  • attr (pour attribution)
  • attrlink
  • alt

Exemple Input figure

{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}

Exemple Output figure

<figure>
  <img src="/media/spf13.jpg"  />
  <figcaption>
      <h4>Steve Francia</h4>
  </figcaption>
</figure>

instagram

Si vous souhaitez intégrer une photo provenant d’Instagram, vous n’avez besoin que de l’ID de la photo. Vous pouvez retrouver l’ID de photo Instagram à partir de l’URL :

https://www.instagram.com/p/BYdaaQegIB4/

Exemple Input instagram

{{< instagram BYdaaQegIB4 >}}

Vous avez aussi l’option de cacher la légende :

{{< instagram BYdaaQegIB4 hidecaption >}}

Exemple Output instagram

En ajoutant l’exemple précédent hidecaption, le HTML suivant sera ajouté à votre marquage de rendu de site web :

Exemple d’Affichage instagram

En utilisant l’exemple précédent instagram avec l’exemple hidecaption ci-dessus, ce qui suit simule l’expérience affichée pour les visiteurs du site. Naturellement, l’affichage final dépend de vos feuilles de style et des balises environnantes.

A post shared by Antoine Choque (@antoine.choque) on

Non étudié à cette heure