---
title: "Exemples images"
date: 2023-07-14T09:16:33+02:00
lastmod: 2023-07-30T09:16:33+02:00
draft: true
categories: ["publication numérique"]
tags: ["exemples", "images", "légendes"]
postimage: "posts/example_images/ben-sweet-2LowviVHZ-E-unsplash-800.jpg"
postimagedescription: "silhouette d'un homme de profil sur fond noir et bleu."
postimage_width: "800"
postimage_height: "450"
imageLicence:
imageAuthor: "Ben Sweet"
imageUrl: "https://unsplash.com/photos/2LowviVHZ-E"
imageService: "Unsplash"
imageServiceUrl: "https://unsplash.com/"
description: "Ce poste est un brouillon pour documenter les différentes manières d'utiliser la légende lors de l'insertion d'une image avec Hugo."
slug: exemples-images
---

Ce poste est un brouillon pour documenter les différentes manières d'utiliser la légende lors de l'insertion d'une image. À la fois pour insérer une simple légende ou pour indiquer une licence si applicable. Le processus est géré grâce au shortcode `figure` par défaut de Hugo ainsi qu'au shortcode personnalisé `img` défini dans le dossier `shortcodes` du thème.

## Image personnelle

Sans mention spécifique de licence mais avec ajout d'une légende. La licence est dérivée de celle du site web. On utilise le shortcode `figure` par défaut de Hugo <span style="font-style: italic; font-size: 0.8rem;">(Attention bien penser à retirer les deux ` `` ` supplémentaires avant le `<` et après le `>` dans le code ci-dessous lors de sa réutilisation).</span>

<pre style="font-size: 0.8rem; text-align: center;">{{`< figure src="/images/posts/example_images/test.jpg" title="Image de randonnée dans les Grisons" >`}}</pre>

{{< figure src="/images/posts/example_images/test.jpg" title="Image de randonnée dans les Grisons" >}}

## Image réutilisée avec mention de licence

Avec mention d'une licence `CC-BY` ou `©` ou toute autre licence du même type. On utilise le shortcode personnalisé `img` <span style="font-style: italic; font-size: 0.8rem;">(Attention bien penser à retirer les deux ` `` ` supplémentaires avant le `<` et après le `>` dans le code ci-dessous lors de sa réutilisation).</span>

<pre style="font-size: 0.8rem; text-align: center;">{{`< img src="/images/posts/example_images/brioche.jpg" licence="CC-BY" author="Igor Milhit" url="https://igor.milhit.ch/brioche/" >`}}</pre>

{{< img src="/images/posts/example_images/brioche.jpg" licence="CC-BY" author="Igor Milhit" url="https://igor.milhit.ch/brioche/" >}}

## Image réutilisée avec simple attribution

Sans mention explicite de licence mais avec tout de même une attribution parce que c'est la moindre des choses. Cela peut être notamment le cas en utilisant des images de [Unsplash][US] avec la [licence Unsplash][LU].

On utilise à nouveau le shortcode personnalisé `img` avec une petite variante <span style="font-style: italic; font-size: 0.8rem;">(Attention bien penser à retirer les deux ` `` ` supplémentaires avant le `<` et après le `>` dans le code ci-dessous lors de sa réutilisation).</span>

<pre style="font-size: 0.8rem; text-align: center;">{{`< img src="/images/posts/example_images/ben-sweet-2LowviVHZ-E-unsplash.jpg" author="Ben Sweet" url="https://unsplash.com/photos/2LowviVHZ-E" service="Unsplash" service_url="https://unsplash.com" >`}}</pre>

{{< img src="/images/posts/example_images/ben-sweet-2LowviVHZ-E-unsplash.jpg" author="Ben Sweet" url="https://unsplash.com/photos/2LowviVHZ-E" service="Unsplash" service_url="https://unsplash.com" >}}

[US]: https://unsplash.com
[LU]: https://unsplash.com/license