Avatare anpassen

Bisher hat das Komments-Plugin Gravatar als Standard- und einzigen Avatar-Dienst genutzt. Mit dem Release 3.2.x hat sich dies geändert. Avatare sind nun anpassbar.

Mit den neuen Optionen lassen sich Avatare nun einfach anpassen. Drei neue Optionen können in der config.php angepasst werden:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'gravatar',
'mauricerenck.komments.avatar.webmentionAvatars' => true

Das hier sind die Standardwerte. Über den service kann gesteuert werden, woher Avatare kommen. In diesem Fall kommen sie von Gravatar. Der returnType steuert die Ausgabe des Avatars, hier stehen drei Optionen bereit:

1. img (default)
2. url
3. svg

SVG ist natürlich nur sinnvoll, wenn ein Service genutzt wird, der SVG zurückgibt.

webmentionAvatars steuert, ob weiterhin die in Webmentions erkannten Avatare angezeigt werden sollen, auch wenn ein anderer Service genutzt wird.

Initialen anzeigen

Bisher gibt es zwei Services:

1. Gravatar
2. Initials

Initials ist kein externer Service, denn diese Avatare werden lokal erzeugt. Um in den Kommentaren Initialen als Avatar anzuzeigen, setzen wird lediglich die Service-Option:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => true

Jetzt werden Avatare weiterhin als Bild ausgespielt und zeigen zwei Buchstaben, abhängig vom Namen der kommentierenden Person. Avatare, die durch Webmentions empfangen wurden, werden weiterhin angezeigt. Das wollen wir ändern und nur noch Initialen anzeigen:

'mauricerenck.komments.avatar.returnType' => 'img',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => false

Die Avatare sehen ganz nett aus, wir möchten sie aber noch ein wenig anpassen. Das ist mit CSS möglich, dazu müssen die Avatare allerdings als SVG eingebunden sein:

'mauricerenck.komments.avatar.returnType' => 'svg',
'mauricerenck.komments.avatar.service' => 'initials',
'mauricerenck.komments.avatar.webmentionAvatars' => false

Jetzt haben wir SVGs direkt im Dokument und können diese Stylen:

.komment-avatar-initials {
    --author-bg: blue;

    --author-text: white;
    --author-size: 50px;
    --author-font-family: Arial, sans-serif;
    --author-font-size: 20px;
    --author-font-weight: bold;
    --author-text-transform: uppercase;
}

Wer noch weiter ins Detail gehen will, kann die CSS-Klasse natürlich komplett überschreiben.

In Zukunft könnten noch weitere Services folgen. Viel Spaß beim Anpassen.