Vignettes

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.

Vignette photo

Filtre photo

En rajoutant la classe photo on rajoute à l'image un filtre composé d'une trame et d'un dégradé coloré transparent.

class="vignette photo"

See the Pen Vignette photo - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

class="vignette photo round"

See the Pen vignette round - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

Vignette solo

Par défaut, une vignette prend 100% de l'espace disponible prévu par son contenant.

La vignette solo sert à afficher une image de manière isolée, par exemple dans un article ou bien dans le bandeau rapport. Elle permet de gérer l'encombrement de la vignette, notamment sur mobile, en la centrant et en lui attribuant une taille.

class="vignette solo (photo)"

See the Pen Vignette solo - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.

Ratios

⚠️ Le système de ratio ne permet de redimensionner grossièrement les images pour les mettre au bon format. L'affinage est vous est laissé à partir de la librairie Js de votre choix. Il est bien entendu conseillé de redimensionner les images côté back.

class="vignette__ratio_1-1"

See the Pen Vignette ratio - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen. 

vignette__ratio_1-1 vignette carrée
vignette__ratio_4-3 vignette quatre tiers
vignette__ratio_2-1 vignette deux fois plus longue que haute

Vignette dans des tuiles

Tags

Les vignettes sont très utilisées pour les tuiles. C'est pourquoi elles sont conçu de manière à abriter également les tags liés à la tuile.

Le contenant avec la balise tag est automatiquement placé en haut à gauche de la vignette, avec une disposition verticale des tags. Il est possible de placer les tags dans les autres coins de la vignette à l'aide des classes bottom et right ajoutées à la class tag.

Vignettes sans image

Dans une liste de tuile, une vignette sans image possède néanmoins un ratio. Son emplacement est occupé par un aplat bleu, de la couleur des liens et des boutons.

Dans ce cas, évidemment, on n'affiche pas de crédit.

Survol

Au survol de la tuile, le filtre photo diminue en intensité.

Pour les tuiles image, une animation de zoom sur la vignette vient mettre en valeur l'interactivité.

See the Pen Vignette dans des tuiles (ici text-media) - TdL UI guide by Margot Nadot (@MagNadAnn) on CodePen.