Interested in setting up Staff avatar badges a la Twitter Community


(Travis) #1

As I understand it, the Twitter Community is officially supported by the Discourse team. Has this setup of staff badges on avatars to denote officials in the community been pluginized? I would really love to use it on our Strats forum.

We are running into issues where we need to distinguish staff but we don’t necessarily want to Add Staff Color to each post of semi-importance.


Avatar Flair (not Badges) for Groups
Suggestion: deeper post-installation customisation guide/recommendations
(Jeff Atwood) #2

Just set the title on the user. You can also set title based on group membership.


(Travis) #3

Of course, @codinghorror. I would not be posting this if I didn’t think this was a need beyond existing core functions. We use titles for other things, they’re fluid and moderators use them to signify things like badges, participation in sub-groups within the community, etc.


(Jeff Atwood) #4

I am sorry, I do not understand what you are asking for? Can you explain it to me more clearly with some real world examples and mockups?

All I see in the Twitter example posted above is an admin shield, and a title?


(Travis) #5

Ah, apologies for not pointing it out in the graphic itself.

I’m specifically referring to the


(Jeff Atwood) #6

Yeah that was not clear at all from your post. You could possibly do that with CSS, but they do it by hand editing their avatars in a graphics program.

Edit: I misspoke! Looks like they indeed do it with CSS, as their profile and other pages do not have this Twitter badge. I would be open to coming up with a way to do this more generally cc @neil


(Tom Newsom) #7

Glyphs on a per-group basis, in addition to and in the same style as the moderator/admin shield?

Or, more flexibly: A textbox for custom CSS to be applied to the username, avatar or title. Configurable from the Group admin page.


(Lisa Wess) #8

I love this - hoping to see it in a future version. :slight_smile: Per group would be ideal!


(Sam Saffron) #9

There is a primary group class on the post so this is easily done with CSS


(Mittineague) #10

You must know some CSS tricks I don’t know.

I see 2 sibling divs

<div class="topic-avatar">
<div style="" class="topic-body">

AFAICT the group is in a span in a div in the second and the avatar is in the first.

<div style="" class="topic-body">
  <div class="topic-meta-data">
    <div class="ember-view names trigger-user-card" id="ember5381">
      <span class="username staff admin moderator discourse">

It looks like a pure CSS approach might be possible per-name

<div class="topic-avatar">
  <a href="/users/sam" classnames="trigger-user-card main-avatar" data-user-card="sam">
    <img alt="" src="https://d11a6trkgmumsb.cloudfront.net/user_avatar/meta.discourse.org/sam/45/5243_1.png"
         class="avatar" title="sam" height="45" width="45">
  </a>

I’m thinking for per-group some JavaScript might be needed here until the has() selector happens.


(Sam Saffron) #11

primary group is on the post itself way up higher …

<div id="..." class="ember-view topic-post clearfix regular group-discourse">

(Neil Lalonde) #12

This is done on Twittercommunity using a plugin that does almost nothing. It adds a div with display: none. In their site customizations, they added this css:

.group-twitter .poster-avatar-extra {
  display: block;
  background-image: url(https://twittercommunity.com/uploads/default/763/d7854bc9dcca2c6b.png);
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  border-radius: 12px;
  position: absolute;
  top: 24px;
  right: -6px;
}

A more general solution could be as simple as adding that div with display: none into the core Discourse code, or adding a UI to make it configurable from the Group admin page. Even with a fancy UI in admin, I think most people will end up writing CSS like above.


Icon next to username on topics?
(Travis) #13

This is exactly what I needed @neil! Thank you so much.


(Sam Jones) #14

For some reason, the .group-groupname class has stopped appearing in my instance. Any ideas what could cause that? I looked through my settings changes and can’t find what I did.


(Neil Lalonde) #15

I don’t know what could have caused that. Meta is running the latest code and group classes are still there. Are you sure the author of the post you’re looking at belongs to a group?


(Felix Freiberger) #18

This div is now included in Discourse itself, so now a CSS customization targeting .poster-avatar-extra is the only thing needed to add a badge like this :thumbsup:


(Jeff Atwood) #19

@neil can you give us little superimposed discourse icons here on meta? Let’s try it out.


(Neil Lalonde) #20

Done! Here’s the CSS:

.group-team .poster-avatar-extra {
  display: block;
  background-image: url(https://meta-s3-cdn.freetls.fastly.net/original/3X/0/6/068854da7eaf9184973a0e4729cfbeebe2363569.png);
  /* background-color: #fff; */
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  position: absolute;
  top: 40px;
  right: -6px;
}

.topic-avatar {
    z-index: 3;
}

Adding a background-color is what Twitter does. Adding it here would look like this:


How can I add an overlay image to staff/group profile pictures?
Whats' that extra image on Jeff's avatar?
Group identification image on avatar
(Sam Saffron) #21

We got to do it on mobile as well :slight_smile:


(@SenpaiMass) #22

This is good. Thanks.

Edit @neil found a bug