Customizing Avatars

Documentation
Reference
Guides

Until now, the Komments plugin used Gravatar as the standard and only avatar service. With the release 3.2.x, this has changed. Avatars are now customizable.

With the new options, avatars can now be easily customized. Three new options can be adjusted in the config.php file:

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

Those are the default values. The service can control where avatars come from. In this case, they come from Gravatar. The returnType controls the output of the avatar, with three options available here:

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

SVG is useful only if a service returns SVG.

webmentionAvatars controls whether avatars detected in Webmentions are still displayed when a different service is used.

Showing initials

So far, there are two services:

  1. Gravatar
  2. Initials

Initials is not an external service, as these avatars are generated locally. To display Initials as an avatar in the comments, simply set the service option:

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

Avatars are still being displayed as images and show two letters, depending on the name of the person who wrote the comment. Avatars received through Webmentions will continue to be displayed. We want to change this and only show initials:

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

The avatars look quite nice, but we would like to adjust them a little further. This is possible with CSS, but the avatars must be included as SVGs for that:

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

Now we have SVGs directly in the document and can style them:

.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;
}

Anyone who wants to go into more detail can, of course, completely override the CSS class.

Further services may follow in the future. Have fun customizing.