Hugo et les images

2023-04-01 Web
Temps de lecture: 1 minutes.

Cet article fait partie de la série: Hugo

Comment ca marche?

L’organisation des images avec Hugo, c’est un peu particulier.

Avec Markdown on ajoute une image avec:

![Text alternatif](image.jpg)

Dossier static

C’est le dossier ou l’on pose nos fichiers statique .

On peut organiser comme ça:

je fais un post info et je place les images dans un sous dossier static/posts/info

static/
├── css
├── img
│   └── posts
│       └── info
│           └── image.jpg
└── js

Ce qui donne dans un post:

![Text alternatif](/img/posts/info/hugo.jpg)

Dossier content

La solution la plus facile a mon goût. On va créer pour chaque article un dossier, et chaque article sera dans un dossier index.html ou va se retrouver le contenue de l’article. cela va permettre de mettre les images dans le dossier de l’article et ça évite de se disperser.

content/
└── posts
    ├── lettre
    │   ├── hugo.jpg
    │   ├── index.md
    │   └── lettre.pdf
    ├── info
    │   ├── images.png
    │   └── index.md
    └── markdown
        └── index.md
 

![Text alternatif](hugo.jpg)

Shortcode interne

On peut utiliser aussi le shortcode interne au moteur d’Hugo

<figure class="imagearticle"><img src="Capture.png" width="600px">
</figure>