Wishlist: visual cue for "user got a badge for this post"

We’re trying to encourage users to help each other. We’ve decided to start awarding a custom ‘Users Helping Users’ badge (u-h-u) to users who are the first to respond and whose response attempts to help.

Because we want lots of this behavior, I’ve made the badge something you can get more than once.

Since it take human intelligence (currently) to assess whether a user’s response was an attempt to be helpful or just a “me too”, this badge is awarded manually.

Adding humans necessarily introduces a point of failure and I’ve realized that it would be very easy to award the u-h-u badge to the same user/post over and over. Nothing stops you. For badges that can only be awarded once, they disappear from the badge-award dropdown, but this one doesn’t.

So, for multiple reasons (including re-inforcement to other users), I think it would be good to have something like this:

Even better if it said what badge (but I only thought of that after the image was uploaded :face_with_hand_over_mouth:)

13 Likes

That is a recurring request, our AI Related Topics feature shows it at

11 Likes

I did search first. :flushed:

7 Likes

Oh I didn’t write a reply to mean that you should have searched first, but to show support for the feature request, as it’s something I remembered being asked many times before.

And the new Related Topics acting on your new topic is way better than a simple search, and can find topics that a search couldn’t :smile:

10 Likes

So I guess a plugin could search badges for topics and add them to the serializer? That seems potentially expensive, though I haven’t looked at what the query would be like.

4 Likes

I think it’s one join with the user_badge table, since that table contains the post_ids. Shouldn’t be very expensive.

3 Likes

In that case, it’s a pretty simple plugin to add the stuff to the serializer, and then some front end stuff to display it.

2 Likes

I’ve closed the other two in favour of this one and pointed them here.

One thing Sam suggested in the other topic was to add a staff notice to the post which earned the manual badge as a way to emphasise it and mark it as already having earned one:

3 Likes

But wait! I think there’s one more. Apparently this is something that I wanted back in 2016. I might have been first! :rofl:

4 Likes

My use case here is that I create “Book Club” topics and everyone who reads the book and then discusses it should receive a “Book Club” badge. The badge can be awarded multiple times, as we have a different book each month.

It can’t really be automatic or bulk-granted by the API since anyone who posts “I don’t want to read this book” would technically be part of the topic and I don’t want to give them the badge.

What I’ve been doing is reading the thread and any time someone says they have finished and writes their review I manually give them the badge. This is a fine workaround, if a bit time consuming.

The trouble is, after a month I forget who I’ve granted it to and who I haven’t, and have to keep clicking into their profiles to see if it has been granted. This gets complicated as people can earn them multiple times.

To cut a long story short, if someone is awarded a badge for a post, would it be possible to show the badge next to that post? All the data is there to do this, it doesn’t seem like it would be too difficult? And this would really help keep track!

PS. On a related note, there seems to be a bug that means the “Reason” is not actually set. I definitely granted this directly on the post, but Reason does not show:

1 Like

@Shauny, I’ve slipped your post over to this existing feature request to keep them grouped together. :slight_smile:

You may want to open a separate topic for that so it doesn’t get overlooked. :+1:

3 Likes

I’m working on adding this over here, if anyone is keen on helping test it out! :slightly_smiling_face:

7 Likes

Are all badges displayed that are awarded in relation to posts?
Especially with the first posts, several badges are easily triggered. For example, a link to another topic in a separate line is enough to trigger first link, first quote, and first onebox. I would therefore find it helpful if I could exclude these badges. Actually, I think I would prefer an opt-in solution, because I think I would like to exclude most badges.


How did system like its own post? Are badges that other people earned for acting on a post (like adding a reaction) shown next to the username of the author of the post? What happens if many users earn ‘first like’ for the same post?

4 Likes

Wow! That’s an incredibly good point. It sounds like it needs to be a badge setting.

2 Likes

Thanks for the early feedback!

The idea is that all badges would be displayed that are awarded in relation to posts, yes. I tried adding several badges to a single post, I don’t think it’s particularly overwhelming.

It’s worth considering that this would really only happen when a user first joins, where they’re likely to get several badges in quick succession.

Ooops, good catch! I was retrieving all badges that were earned for a post, rather than just the badges earned by the post author for that post.

5 Likes

I’ve been polishing this up today, there are a couple of recent changes that I’d love to get some feedback from everyone on.

First up, I’ve added the badge type colours to the badges, but it feels like it might be a bit too much of a visual distraction when scrolling through a topic:

What do folks think? Looks fine, or too much?

I’ve also been thinking some more about how to exclude individual badges. I don’t think it needs a whole new option, so instead I’ve added a CSS class to each badge based on the badge slug, so you can choose to hide them individually through your theme CSS. For example:

.topic-meta-data .user-badge-button-first-onebox {
  display: none;
}

This allows a fine-grained level of customisation for anyone who wants it. Instead of only being able to turn it on or off, you can choose to draw attention to some badges, instead! :smile:

.topic-meta-data .user-badge-button-first-onebox {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
4 Likes

What about all those admins who aren’t programmers? The argument ‘it could be hidden with CSS’ works for a lot of Discourse features and still often a setting is added. I think there should be an option to disable it without using CSS. And I would still prefer an opt-in solution since I like the idea to highlight specific badges, but I wouldn’t enjoy seeing all “first xxx” badges everywhere at all Discourse communities. And I’m afraid many admins won’t bother to disable it, especially if you need CSS knowledge to do so.

I think this also de-emphasizes the moderator shield, because that now looks like another badge.

I like the colors because otherwise there is no difference between nice and great topic. And colors can also be helpful for custom multicolor images that were uploaded. But I understand your concern regarding the visual noise. The reactions plugin has a setting

discourse reactions desaturated reaction panel

Reduces visual noise of reactions by displaying them desaturated until hover

Many a setting like that would work here too. But that also could be done with css :slight_smile:

5 Likes

I like the color.

Re CSS - I’m just thrilled to have an option to turn some of them off.
Would it be better as an opt-in, non-CSS setting? Absolutely!

But I’m the beggar here. :sweat_smile:

3 Likes

I don’t think admins need to be programmers to modify the theme CSS (see: the massive ecosystem that was MySpace themes, back in the day). Rather, I think we should be aiming to empower admins to experiment with making their site uniquely their own.

Choosing to opt-in each badge is totally possible:

// Hide all badges by default.
.user-badge-buttons > span {
    display: none;
}

// Show the First Quote badge.
.user-badge-buttons > .user-badge-button-first-quote {
    display: revert;
}

I totally agree, thank you for pointing that out! I’ve added a little bit of padding between the shield and the badges, to keep the visually separated.

Great, let’s leave it as is, then! :slightly_smiling_face:

2 Likes

It’s also worth mentioning that it’s relatively easy to add custom CSS to your site without having any specific technical knowledge: Making custom CSS changes on your site. If the documentation for this badge indicator feature can include CSS examples to use, then it would be fairly trivial for any site admin to copy/paste what they need, and edit if required.

2 Likes