Avatar Flair (not Badges) for Groups

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!

Badge?

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?
35 Likes

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

1 Like

Yeah I’ve been using that too.

9 Likes

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

STAN
I need to talk about your flair.

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

STAN
Well, ok, 15 is minimum, ok?

JOANNA
Ok.

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

JOANNA
Ok. Ok, you want me to wear more?

STAN
Look. Joanna.

JOANNA
Yeah.

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

JOANNA
Ok. So, more then?

STAN
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?

JOANNA
Yeah. Yeah.

STAN
Great. Great. That’s all I ask.

JOANNA
Ok.

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

14 Likes

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.

10 Likes

Is this still on the agenda?

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.

1 Like

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?

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:

11 Likes

Maybe something like this?

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?

8 Likes

Good idea. :thumbsup:

3 Likes

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?

2 Likes

Same issue here …

2 Likes

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

1 Like

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.

3 Likes

Thanks @tobiaseigen :wink:

1 Like

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

3 Likes

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?

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