{avatar} · PAD tags

Syntax

{avatar 'name'}
{avatar $name, size=48, shape='square', label='text'}

Parameters

name: The name: its first and last word give the letters. An e-mail address counts by the words before its @ (herbert.jebbink@... is HJ).

Options

size: Width and height in pixels, default 48.
shape: circle (default) or square - with rounded corners.
label: The accessible name (aria-label and <title>), by default the name.

Description

{avatar} draws the initials of a name as an inline SVG (tags/_lib/avatar.php) - the picture a user list or a comment shows for someone without a photo. Nothing is fetched or stored: the same name is the same picture on every page and in every e-mail.

The letters are the first letters of the first and last word of the name; a single word gives one letter, and an e-mail address is read by the words before its @, split on dots, dashes and underscores. A name without letters is drawn as ?. The background is one of ten palette colours picked by a SHA-256 hash of the lower-cased name, and the letters are white or near-black, whichever has the higher WCAG contrast on it.

The colours are the custom properties --pad-avatar-1 ... -10 and --pad-avatar-ink-<n> on .pad-avatar, with light-dark() defaults written once per page in a <style> (with the request's nonce when $padCsp asks for one). The SVG is role="img", named by the name or by label.

No name, or a shape other than circle or square, is an error under the strict check. For a pattern that does not reveal the name, see {identicon}; for a person's own picture, {gravatar}.

Examples

Sizes and shapes

Circles and rounded squares; an e-mail address counts by the words before its @.

Templateexamples/avatar/1-shapes.pad

<p style="display:flex; align-items:center; gap:12px; flex-wrap:wrap">
  {avatar 'Ada Lovelace', size=24}
  {avatar 'Ada Lovelace', size=48}
  {avatar 'Grace Hopper', size=48, shape='square'}
  {avatar 'linus.torvalds@example.org', size=48}
  {avatar 'Prince', size=48, label='The artist'}
</p>

Resultopen alone

A team list

An avatar per row - the colour comes from a hash of the name.

Templateexamples/avatar/2-team.pad

<ul style="list-style:none; padding:0; display:grid; gap:10px">
  {team}
  <li style="display:flex; align-items:center; gap:10px">{avatar $name, size=36} <span><strong>{$name}</strong> - {$role}</span></li>
  {/team}
</ul>

PHPexamples/avatar/2-team.php

<?php

  $team = [
    [ 'name' => 'Alan Turing',       'role' => 'Expressions'    ],
    [ 'name' => 'Émile Zola',        'role' => 'Translations'   ],
    [ 'name' => 'Margaret Hamilton', 'role' => 'Error handling' ] ];

?>