Add group flair on member avatars

[Discourse]

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:

1. Adding flair while creating a new user group
2. Adding flair to existing user groups
3. Adding flair to an automatic or default user group
4. Styling flair image

Instructions

Group flair can be configured for:

1. 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.
2. 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:

1. Add /g to the end of your site’s URL (e.g., your-site.com/g)

2. Use the sidebar navigation:

   • Click the sidebar icon (typically in the top-right corner)
   • Select “Groups” from the menu options
     
     

3. 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:

1. Look for the “New Group” button in the top-right corner of the screen.

2. Click the New Group button to open the group creation page.

3. On the group creation page, you’ll see options to set flair images.
   

   

4. After configuring your group, click the Create button.

For more details about creating a new group, check this guide: Creating groups in Discourse

Adding group flair to existing user groups

Locate group as indicated in the Access the groups page section.

1. Select the Manage tab.
2. Go to Membership.
   
   

Adding group flair to an automatic or default user group

Locate group as indicated in the Access the groups page section.

1. Select the Manage tab.
   
   

Add group flair image

Select one of the two options for flair image.

Add an icon

1. Search or browse for an appropriate Font Awesome icon.
   

   

2. Select a Font Awesome icon.
   

   

3. 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.

1. Pick a custom image from your device.
   

   

2. Upload that image.
   

   

3. 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.

1. User cards
   

   

2. Topic/PM posts
   

   

3. Topic maps
   

   

4. User profile banners
   

   

5. User summary “Most…” lists
   

   

6. Users list
   

   

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

• Topics tagged groups
• Trust-Level Avatar Flair

Last edited by @Lilly 2024-10-23T17:57:16Z

Check document

Perform check on document: