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

**URL:** https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923
**Category:** Feature
**Tags:** badges
**Created:** [October 20, 2023, 5:26pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923 "2023-10-20T17:26:08Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [October 20, 2023, 5:26pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/1 "2023-10-20T17:26:08Z")

</div>

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:

 ![Selection_1386](https://global.discourse-cdn.com/meta/original/4X/3/9/d/39daef1a926946c98b8ea3306d1c35c4e6a4bffb.png)

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 20, 2023, 5:38pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/2 "2023-10-20T17:38:17Z")

</div>

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

> [@Display granted badge underneath post](https://meta.discourse.org/t/display-granted-badge-underneath-post/79799):
>
> After the welcome addition of the “Grant Badge” button to the post “spanner” menu, can I suggest one additional feature: Display under the post that a badge has been granted. Visually it would be similar to the link that’s shown to mods when another mod has PMed the user about their post. The icon of the badge and the avatar of the granter could be included. This message would help avoid two moderators awarding the same badge to the post. It would also display the badge more prominently to …

> [@Show badges on post?](https://meta.discourse.org/t/show-badges-on-post/93009):
>
> Hi, In our community, we have a team of moderators. Since we thrive on members asking questions and contributing answers, we often want to give “Great Question!” and “Great Answer!” badges in our community. However, we don’t want to give the same person the same badge for the same post. Also, we’d like for other members of the community to be able to identify the best kinds of questions and answers on the site so they can aspire to those standards. In light of that, I am wondering if it would …

---

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [October 20, 2023, 5:42pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/3 "2023-10-20T17:42:05Z")

</div>

I did search first. :flushed:

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 20, 2023, 5:52pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/4 "2023-10-20T17:52:59Z")

</div>

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:

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 21, 2023, 11:59am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/5 "2023-10-21T11:59:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 21, 2023, 10:57pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/6 "2023-10-21T22:57:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 21, 2023, 11:32pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/7 "2023-10-21T23:32:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 22, 2023, 9:48am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/14 "2023-10-22T09:48:15Z")

</div>

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:

> [@Display granted badge underneath post](https://meta.discourse.org/t/display-granted-badge-underneath-post/79799/7):
>
> I certainly like this feature a lot, but I am uneasy about adding a query to every single topic page we display just for it. My recommendation here would be to simply introduce a bit of manual process here when you grant the badge: Add a staff note to the posts you assign badges for, it can link to the badge. I feel this resolves the OP really cleanly and wonder if we should just have some way of doing this automatically by adding a checkbox. But a workaround exists now and is super…

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [October 25, 2023, 6:47pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/15 "2023-10-25T18:47:08Z")

</div>

> [@JammyDodger](#):
>
> I’ve closed the other two in favour of this one and pointed them here.

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

> [@Show badges on topics that earn them](https://meta.discourse.org/t/show-badges-on-topics-that-earn-them/40296/4):
>
> This is what I do now. I have a set of badges whose SQL assigns a bronze badge when they post in a “completions” category with a certain tag. A silver badge is assigned when I “like” their response, and a gold badge is assigned when they get a certain number more likes. I am about to get that process [automated](https://meta.discourse.org/t/creating-badge-via-api-query-works-but-returns-422/40127). What I’m looking for now is a way for those badges to be displayed on the topic page that awarded the post. It would be nice if when someone saw a post they could see that it had earned …

---

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [February 17, 2024, 10:23pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/16 "2024-02-17T22:23:25Z")

</div>

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:

 ![book-club](https://global.discourse-cdn.com/meta/original/4X/5/4/8/5484a50f6733d476d0907df8659abfd4caead867.png)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [February 17, 2024, 10:55pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/17 "2024-02-17T22:55:48Z")

</div>

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

> [@Shauny](#):
>
> 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:

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

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [October 23, 2024, 6:33am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/18 "2024-10-23T06:33:30Z")

</div>

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

[https://github.com/discourse/discourse/pull/29362](https://github.com/discourse/discourse/pull/29362)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 23, 2024, 7:28am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/20 "2024-10-23T07:28:24Z")

</div>

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.

 ![379124238-8b3edfe7-316f-44a5-8541-f0df0012e7c8](https://global.discourse-cdn.com/meta/original/4X/d/7/f/d7fef8e92a0ec4c8aa623d01b104d60544358169.png)  
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?

---

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [October 23, 2024, 11:32am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/21 "2024-10-23T11:32:23Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [October 24, 2024, 11:57pm UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/22 "2024-10-24T23:57:46Z")

</div>

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.

![](https://global.discourse-cdn.com/meta/original/4X/3/7/9/379d57f8cd2bdefaa6a1b18b4ae5c47d4fb5f68b.png)

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.

> [@Moin](#):
>
> How did system like its own post?

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.

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [October 28, 2024, 4:06am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/23 "2024-10-28T04:06:48Z")

</div>

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:

 ![screenshot](https://global.discourse-cdn.com/meta/original/4X/5/8/d/58d9b21068e6ea479c129b68b6c8d46ef35fb64a.png)

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:

```css
.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! :grinning_face_with_smiling_eyes:

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

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

```

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 28, 2024, 5:59am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/24 "2024-10-28T05:59:01Z")

</div>

> [@pento](#):
>
> 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

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:

---

<div class="post-metadata">

### Author: ![ganncamp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ganncamp/32/106199_2.png) [@ganncamp](https://meta.discourse.org/u/ganncamp)
#### Post date: [October 28, 2024, 11:56am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/25 "2024-10-28T11:56:24Z")

</div>

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:

---

<div class="post-metadata">

### Author: ![pento](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pento/32/450661_2.png) [@pento](https://meta.discourse.org/u/pento)
#### Post date: [October 29, 2024, 12:12am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/26 "2024-10-29T00:12:33Z")

</div>

> [@Moin](#):
>
> 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 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.

> [@](#):
>
> 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.

Choosing to opt-in each badge is totally possible:

```css
// 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 think this also de-emphasizes the moderator shield, because that now looks like another badge.

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.

> [@Moin](#):
>
> I like the colors

> [@ganncamp](#):
>
> I like the color.

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

---

<div class="post-metadata">

### Author: ![hugh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hugh/32/336717_2.png) [@hugh](https://meta.discourse.org/u/hugh)
#### Post date: [October 29, 2024, 12:21am UTC](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923/27 "2024-10-29T00:21:13Z")

</div>

> [@pento](#):
>
> 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.

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](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101). 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.

[Next page](https://meta.discourse.org/t/wishlist-visual-cue-for-user-got-a-badge-for-this-post/282923.md?page=2)
