Avatar

2026.08.18 Contenu

Un avatar est une petite vignette circulaire ou un repli par initiales qui identifie l’auteur d’une recommandation. Il est piloté par les champs image et name de chaque entrée dans data/recommendations.yml; ce n’est ni un contrôle de compte générique ni une API de rédaction.

Peter Marinelli

Quand l’utiliser#

Dans l’attribution d’une recommandation, à côté du nom de l’auteur et de son information de profil
Lorsque les données sources fournissent une image de profil locale; sinon, le composant dérive un repli de deux initiales à partir du nom adjacent
Pas comme contrôle — un avatar identifie, il ne navigue pas et n’ouvre pas de menus

Implémentation#

- id: "660062653"
  name: Peter Marinelli
  image: /images/linkedin/02-peter-marinelli.jpg

Lorsque image est vide, le composant affiche plutôt PM. Le nom reste visible dans l’attribution.

{{ partial "avatar.html" (dict "name" $entry.name "src" $entry.image "class" "avatar-recommendation") }}

<img class="avatar avatar-recommendation" src="/images/linkedin/02-peter-marinelli.jpg" alt="" loading="lazy" />

<span class="avatar avatar-fallback avatar-recommendation" aria-hidden="true">PM</span>

layouts/partials/avatar.html reçoit un nom et un chemin d’image facultatif. Il rend une image décorative chargée à la demande lorsque l’image existe; sinon, il dérive jusqu’à deux initiales du nom. Les deux layouts de recommandations appellent le même partial. Les jetons component.avatar.* gouvernent sa taille, sa surface de repli, son avant-plan et sa bordure.

Options#

Option	Rôle
`name`	Texte d’identité adjacent obligatoire et source des initiales de repli lorsqu’il manque une image
`src`	Chemin d’image locale facultatif de l’entrée de recommandation
`class`	Classe de contexte facultative; `avatar-recommendation` nomme la présentation courante

Manifeste d’interface

Nature: Composant
Catégorie: Contenu
Statut: Implémenté
Implémentation: Partial:layouts/partials/avatar.htmlGabarit:layouts/about/recommendations.htmllayouts/blog/recommendations.htmlDonnées:data/recommendations.ymlCSS:assets/css/site.cssConfiguration:tokens/core.tokens.json

Accessibilité#

L’avatar ne reçoit pas le focus et n’agit pas comme un contrôle.
L’image porte un alt vide; le repli par initiales est aria-hidden. Les deux sont décoratifs parce que le nom de la personne apparaît dans le figcaption adjacent.
Le nom de la personne doit apparaître en texte adjacent; l’identité ne doit jamais reposer sur l’image ou les initiales seules.
Un échec d’image ne doit pas retirer le texte adjacent. Le champ de données peut être corrigé indépendamment du layout.