Avatar Flair (not Badges) for Groups


(Neil Lalonde) #1

A customization that people keep asking for is to show a little badge on user avatars based on group membership. This was first done on the Twitter Developers forums:

and has since sprung up here on Meta, on Turtle Rock in multiple forms, and other places.

Those are implemented with CSS which is fragile and often renders them where they shouldn’t…

It’s time to build this into Discourse!


First, I don’t know if “badge” is the best word for them because we already have Badges. Is there another term we could use?

Group settings

Since these avatar badges are shown based on a user’s primary group, they can be defined in the group settings. I imagine something like this:

Some other additions:

  • include these badges by default for the admins and moderators groups.
  • ability to show these based on trust level?

Avatar Flair Image not showing up
Add mini-logo on top of mods avatar
Group identification image on avatar
Moderators group: flair and name?
User stats under avatar
:es: Revisión de traducciones en Español
Locations Plugin
Proposal: Flair on avatar for trust level
Proposal: Flair on avatar for trust level
Improving the Groups page for 1.7
Finnish locale typos and other notes
(Régis Hanol) #2

I’ve seen a lot of sites using “flair” for this.

(Neil Lalonde) #3

Yeah I’ve been using that too.

(Jeff Atwood) #4

How many pieces of flair can we add to our avatar? Because Brian has thirty-four thirty-seven.

I need to talk about your flair.

Really? I have 15 buttons on. I, uh, (shows him)

Well, ok, 15 is minimum, ok?


Now, it’s up to you whether or not you want to just do the bare minimum. Well, like Brian, for example, has 37 pieces of flair. And a terrific smile.

Ok. Ok, you want me to wear more?

Look. Joanna.


People can get a cheeseburger anywhere, ok? They come to Chotchkie’s for the atmosphere and the attitude. That’s what the flair’s about. It’s about fun.

Ok. So, more then?

Look, we want you to express yourself, ok? If you think the bare minimum is enough, then ok. But some people choose to wear more and we encourage that, ok? You do want to express yourself, don’t you?

Yeah. Yeah.

Great. Great. That’s all I ask.


I thought I remembered you saying that you wanted to express yourself.

(Neil Lalonde) #5

This is mostly done. It shows the flair on avatars beside posts for now. While testing, this was crying for an optional color field too, so I added it.


Is this still on the agenda?

(Tom Newsom) #7

I would love to be able to do this for multiple groups rather than just the primary one. Although I’d have thought they’d be small grey ones like the Moderator shield. You could have a dozen and it’d still be fairly unobtrusive.

(Neil Lalonde) #8

How would you display a dozen (or thirty-seven) flair on one avatar??

Yes, although I don’t have images for them… What should they be?

(Tom Newsom) #9

Not on the avatar, on the username.

My particular use case:

We have teams (groups) responsible for different areas of a workshop. Some people are members of multiple teams. It’s good to know what authority a person holds when you’re talking to them. “Ah, I’d better listen to what Jane says about the oscilloscope; she’s got a little lightning bolt by her name which means she’s an electronics technician”

EDIT: My html bodging made the user info bits display on new lines. ignore that :smiley:

Avatar flair suggestions

Maybe something like this?

(Tobias Eigen) #11

Hey, I’m just looking into avatar flair and really like it! Nice work, guys. :rocket:

While experimenting with this on my site, I was expecting/hoping to find the ability to add font awesome class icons, similar to adding badges. Is there a particular reason this was not done for flair?

(Neil Lalonde) #12

Good idea. :thumbsup:

(Tobias Eigen) #13

Hmm… I’ve configured the avatar flair field but nothing is showing up in discussions. Is there something else I need to do to make flair show up, like add custom css or run a sidekiq task?

(David O'Dea) #14

Same issue here …

(Tobias Eigen) #15

nice to know I’m not alone. :wink:

(Tobias Eigen) #16

Ah - I got it working on my site. @kuyashi… the answer is that you have to select the “automatically set as primary group” for the flair to show up. I guess it has to know which one takes priority.

(David O'Dea) #17

Thanks @tobiaseigen :wink:

(Jeff Atwood) #18

Only the primary group for the user will show it. A user could be a member of 10 different groups, etc.

(Tobias Eigen) #19

when you’re at the bleeding edge, you gotta love the undocumented features! :slight_smile:

not even sure actually what “automatically set as primary group” means. Does this mean that when the person is awarded the badge, their “primary group” is set to this group from whatever it was previously? Does primary group have any other purpose?

(Alex Armstrong) #20

If you couple a primary group with the “default title” setting, you can automatically assign helpful titles to users. I use this at my system for displaying a user’s institution (automagically maintained by email address).