Une vignette est un système de balises qui vise à garantir une homogénéité dans le traitement des images du sites, notamment dans les tuiles et dans le contenu des pages. Un élément Vignette a vocation à :
- Proposer un filtre photo
- Permettre de donner rapidement un ratio à une image (carré, 4/3, 2/1...)
- Permettre d'afficher un crédit pour le visuel.
- Proposer l'affichage de tags dans le cas d'une vignette comprise dans une tuile.
Architecture
Une vignette est basiquement composée ainsi :
<div class="vignette"> <div class="vignette__image-wrap"> <img class="vignette__image" /> <p class="vignette__credit"> <ul class="tags">* * facultatif
Crédit
Il est important d'afficher un crédit à tout visuel affiché sur le site.
Pour cela on insère dans la balise vignette une balise <p class="vignette__credit">.
Le crédit s'affoche au survol de la vignette
Variantes
D'autres classes peuvent s'ajouter dans ce balisage, nous allons les aborder ci-dessous.