This is a guide for configuring automatic group flair on user avatars in Discourse.
Required user level: Administrator
Automatically add group flair to members’ avatars
Group avatar flair displays to the bottom-right of a user’s avatar, providing a stylish way to highlight a user’s group membership. When creating or configuring a group, an admin can choose an image or Font Awesome icon to use as group flair.
Summary
This guide covers the steps to automatically add group flair to members’ avatars, including setting up avatar flair for automatic and custom user groups, and configuring relevant settings.
Overview
Below are the currently supported contexts, using our logo as an example.
There are instructions for three different cases:
- Adding flair while creating a new user group
- Adding flair to existing user groups
- Adding flair to an automatic or default user group
- Styling flair image
Instructions
Group flair can be configured for:
- Automatic user groups: Includes admins, moderators, trust levels, and everyone. Automatic groups in Discourse can’t be deleted, and they manage user permissions and specific functions. Only staff can see most automatic groups except for the moderators group.
- Custom user groups: All groups that are not created by the system.
Accessing the groups page
There are three ways to access the groups page:
-
Add
/g
to the end of your site’s URL (e.g.,your-site.com/g
) -
Use the sidebar navigation:
- Click the sidebar icon (typically in the top-right corner)
- Select “Groups” from the menu options
-
Go user list page: (e.g.,
your-site.com/admin/users
)
Locate the group in the “All Groups” input box, filter the group by its type or scroll down and locate the desired group box item, then click on it.
Adding group flair while creating a new user group
Upon arriving at the groups page:
-
Look for the “New Group” button in the top-right corner of the screen.
-
Click the
New Group button to open the group creation page.
-
On the group creation page, you’ll see options to set flair images.
-
After configuring your group, click the Create button.
For more details about creating a new group, check this guide: Create a group in Discourse
Adding group flair to existing user groups
Locate group as indicated in the Access the groups page section.
- Select the
Manage tab.
- Go to Membership.
Adding group flair to an automatic or default user group
Locate group as indicated in the Access the groups page section.
- Select the
Manage tab.
Add group flair image
Select one of the two options for flair image.
Add an icon
-
Search or browse for an appropriate Font Awesome icon.
-
Select a Font Awesome icon.
-
Click the Save Changes button at the bottom.
Upload an image
It’s recommended that you use an image with a square aspect ratio and a size somewhere around 100x100 px. The image the Discourse Team uses here on Meta is 88x88 px.
-
Pick a custom image from your device.
-
Upload that image.
-
Click the Save Changes button at the bottom.
Style flair image
Hex color values are used to style your avatar flair. A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. For more information, visit Wikipedia.
Style Icon
Select an icon and add color values for flair foreground and background. You can style either the foreground or the background or both.
Style Uploaded Image
Select an image and add color values for flair foreground and background. You can style either the foreground or the background or both.
Where will group flairs show?
Group avatars are visible in several places.
-
User cards
-
Topic/PM posts
-
Topic maps
-
User profile banners
-
User summary “Most…” lists
-
Users list
-
Latest list on categories page
Common issues and solutions
-
Flair not appearing: Ensure the group is set as a primary group and that the user has not manually overridden this setting in their preferences.
-
Multiple flairs: Users can only display one group flair at a time. Prioritization is given to the most recently joined group if multiple groups have automatic flair settings.
FAQs
Can a user belong to multiple groups with flair?
Yes, but only one group’s flair will be displayed at a time. Users can select which flair to display if belonging to multiple groups.
Additional resources
Last edited by @yigit 2024-07-15T07:54:10Z
Check document
Perform check on document: