Table des matières

Deux possibilités pour afficher les images avec Hugo : utiler un shortcode ou écrire en markdown.

Une image centrée avec un shortcode

Le fichier img.html est à placer dans le dossier layout/shortcode de votre thème : le voici

{{ with .Get "align" }}<div style="text-align: {{.}};">{{ end }}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
        <img src="{{ .Get "src" }}"{{ with .Get "width"}} width="{{.}}"{{ end }} />
    {{ if .Get "link"}}</a>{{ end }}
    {{ with .Get "caption" }}<span class="caption"><figcaption>{{.}}</span></figcaption>{{ end }}
</figure>
{{ if .Get "align" }}</div>{{ end }}

<style>
.caption{
  font-weight: bold;
  color: #ccc;
  font-size: 1.3em;
  }
</style>

Pour l’affichage

 { {< img src="url_de_l_image" caption="titre" width="largeur"  align="center right ou left" >} }
Les shortcodes pour Hugo

Une image flottante en Markdown

Voici le code markdown, on peut spécifier sa taille (en px ou en %) dans le css.

![](/image.png#floatleft) ou  ![](/image.png#floatright)

Le CSS

img[src$='#floatleft']
{
   float:left;
   width: 15%;    //etc. etc/
}

img[src$='#floatright']
{
   float:right;
   width: 200px;       //etc. etc.
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla ac leo non varius. Aenean pharetra urna vel congue ornare. Sed id congue lacus, non vulputate orci. Pellentesque vestibulum, lacus in bibendum egestas, neque sem accumsan ipsum, a tempus nulla dui sit amet metus. Suspendisse vitae ante quis leo suscipit tempor. Duis ut nisi cursus, imperdiet dolor ac, ullamcorper massa. Cras ligula ante, pellentesque ac elit eu, gravida faucibus nulla. Nam vehicula arcu vel sodales malesuada. Integer ultricies volutpat ligula sed vulputate. Duis sit amet maximus ex, sed posuere magna.

Cras dignissim leo vitae imperdiet hendrerit. Vestibulum maximus lacus quis est fermentum sollicitudin. In porta aliquet nulla, at tincidunt velit lobortis vel. Sed eget laoreet risus. Cras at tincidunt neque. Sed vel aliquet erat, eget efficitur nisl. Aenean sapien tellus, bibendum vel elit vel, condimentum pretium augue.
Praesent accumsan condimentum ligula ac sodales.

Ut nec urna eu nibh consectetur finibus. Donec eget nibh vel turpis rhoncus tristique id sed velit. Donec accumsan sem quis dapibus laoreet. Morbi tristique laoreet est at gravida. Aenean congue odio id tempus ullamcorper. Mauris iaculis purus vel lorem sodales, sed cursus eros luctus. Aenean sit amet gravida nulla. Duis condimentum ante sit amet libero placerat, ut laoreet quam sodales. Integer ut vehicula sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean quis sodales est.
Nunc id mi velit. Sed bibendum tortor vitae facilisis egestas. Ut blandit urna nisl, sed porttitor magna mattis sit amet. Nunc eget consequat metus, eget venenatis ligula. Vivamus facilisis felis eget libero sollicitudin, ac sagittis turpis sagittis. Donec magna ante, accumsan a pharetra ut, ultrices id arcu. Duis et dui ut nulla fringilla gravida id et velit. Mauris in ligula dictum, vestibulum quam ac, imperdiet felis. Mauris porttitor, tellus id suscipit venenatis, urna diam tempus justo, vel tempus elit ipsum eget ipsum. Integer purus eros, scelerisque ut semper quis, semper vitae neque. Quisque ut venenatis tortor.

Curabitur vestibulum neque felis, sit amet ultricies sapien venenatis eget. Cras facilisis facilisis hendrerit. Donec pretium ipsum at purus placerat, non ultrices purus rhoncus. Duis maximus enim nibh, vel eleifend eros pharetra sed. Aliquam maximus egestas massa non placerat. Cras placerat a odio id luctus. Nunc sit amet enim tortor. Sed ut aliquam mauris. Nam in lorem nec magna pellentesque porttitor. Aliquam tincidunt neque quis augue rhoncus sodales. Curabitur luctus elit at gravida sollicitudin. Proin dignissim nisl quis nunc tristique, a porta metus sagittis.