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?
36개의 좋아요

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

1개의 좋아요

Yeah I’ve been using that too.

9개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

Good idea. :thumbsup:

3개의 좋아요

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개의 좋아요

Same issue here ..

2개의 좋아요

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

1개의 좋아요

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개의 좋아요

Thanks @tobiaseigen :wink:

1개의 좋아요

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

4개의 좋아요

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