Part 1 of a series introducing what’s new in NodeBB v0.9.0. Other parts of the series:
- Part 2 – https://blog.nodebb.org/emailers/
Last month, with the release of NodeBB v0.9.0 coming up, I implemented user icon functionality by default. This change came about due to repeated requests to remove Gravatar integration due to some privacy and security issues.
In contrast to the perceived gain of Gravatar, whether it was removed from core or not was a judgement call. It’s very nice to have a user register and be automatically assigned a friendly avatar.
In the end, we opted to give admins the options to decide whether to use gravatar or not, and instead of defaulting to gravatar for new users, new users are now assigned a random colour and user icon.
In contrast, the bare minimum functionality would be to assign no image (or a static image) for all users, though that means users aren’t really differentiated beyond their username.
How are the user icons implemented?
Warning: Technical content ahead
Some possiblities:
- Generate an image using an image composition library, and set it as the user’s profile picture
- Create an "image-like" element using HTML and CSS
After some deliberation, we decided that the former was not scalable, as it required server-side processing to generate a unique image for each user.
Luckily, it was quite straightforward to render user icons with HTML and CSS.
Generic mixin for user icons
.user-icon-style(@size: 32px, @font-size: 1.5rem, @border-radius: inherit) { border-radius: @border-radius; width: @size; height: @size; line-height: @size; font-size: @font-size;
}
Styles for individual user icons
<!-- IF user.picture -->
<img title="{user.username}" class="img-rounded" src="{user.picture}">
<!-- ELSE -->
<div class="user-icon" style="background-color: {user.icon:bgColor};" title="{user.username}">{user.icon:text}</div>
<!-- ENDIF user.picture -->
Ideally, the user icon would be CSS on top of the img element, although img elements are treated specially by browsers, and styling via pseudo-elements cannot be properly applied consistently across all browsers.
Think you can make it happen?
It works great in Chrome, less so in any other browser 🙂
How does this affect me, as a forum owner?
Next time you upgrade…
- Any new users will have a user icon generated
- If you had a custom default avatar set, the default should still be properly set.
- Any users using a gravatar will have their picture reset to their user icon.
What if I liked using Gravatar?
You will still be able to enable gravatar functionality by installing nodebb-plugin-gravatar. The plugin even contains options to allow you to auto-set the default picture to gravatar upon user registration.
For more information, see: