Post Badges component

(Taylor) #1

This component will add earned badges next to a post author’s username. Specific badges to display can be adjusted through a theme setting.

Repository link

Preview at Discourse Theme Creator

Key features

  • Support for both default and custom badges.
  • Hovering over the badge will show a tooltip with the badge’s description.
  • Clicking on the badge will take a user to the badge’s overview page

Usage tips

  • Some default badges contain links in their descriptions. These will not display nicely as a tooltip, so it is recommended to customize the description at /admin/customize/site_texts. You can find what you need to modify by searching for part of the description’s current text.



If you are unfamiliar with theme components and how to install them, check out the theme installation guide. And if you’d like to learn more about Discourse themes, take a look at this guide.

Show badges on post?
(david) #2

omg, @tshenry, you keep on making the kind of things my community wants! We had similar functionality on our old invision community board before it shut down–we were all sad to see it go. They’ll love it!

(david) #3

I don’t know if there’s any other Babble users out there wondering, but if you’re using custom icons for badges they show full size in babble chat.

I personally don’t think it’s necessary to show the badge icons in Babble at all (in my use case), so I used:

.babble-post-name .names.trigger-user-card .poster-icon {
display: none;

It works, but if anybody knows a better way let me know, please.

(El Foro Viajero) #4

I get this error when trying to add the component:

Error: Undefined variable: “$bronze”.
on line 10 of theme_field.scss
color: $bronze;

what might it be?

(Taylor) #5

This indicates you are running an older version of Discourse. I just added the necessary import for backwards compatibility. So if you update the component, you should be good. I’ll remove it after the next stable release.

(Bart) #6

This is brilliant, thanks!! One suggestion though: it would be useful is clicking the badge could take you to the user’s badge page for this particular badge, making it easier to identify why this person received it. I added this to the code myself now, perhaps you could add a switch in the component settings to enable/disable this?

(Taylor) #7

Fantastic suggestion! It absolutely makes more sense to link the post badges to their respective user badge page rather than the badge overview page. I’ve updated the component with this behavior. I don’t think there needs to be any kind of toggle setting. The “Others with this badge” button will take you right to the badge overview page if someone is looking for it.

Thanks @bartv!

(Chris Klugewicz) #8

This is a really BRILLIANT component!!! Is it possible to do something similar to show group membership rather than badges earned? I’d be willing to try to make that work, but I’m not sure what parts of the script I’d need to modify to achieve it …

1 Like
(El Foro Viajero) #9

it worked! thanks very much for the update :slight_smile:

1 Like
(Taylor) #10

This is an interesting idea. We do have group flair that can be applied to avatars, but it only works with one group. I can imagine use cases where indicating that a user is part of multiple groups would be helpful. This might be possible, but I’d have to look into it more. I’m not sure if/when I will have time to explore this, but if you want to see what you can come up with in the mean time, go for it!

(Daniela) #11

You can create custom badges for groups and show them next to the author’s name. If you put the link to the group in the description of the badge you make everything easier.

(Chris Klugewicz) #12

Perfect solution! Thank you!!

1 Like
(Bart) #13

After using this component for a few days I feel it’s not quite production-ready yet: it’s really hammering my server with lots of requests and slowed down the entire site. Also, on larger topics I saw lots and lots of 429 response codes in the console as it was querying the badges of each individual poster.

I really love the idea here and so does my community, but I think it could use a little more TLC first :slight_smile:

(Taylor) #14

You’re right, thanks for reporting!

The intended behavior was to only make one request per user, per full-page load. This means if you have a topic with 1000 posts and 8 participants, there would be 8 requests max. If you went to another topic (without a full-page load) that had the same 8 participants and 2 new participants, there would only be 2 requests.

I think I’ve have a fix to accomplish the intended behavior, but I need to do some more testing. Stay tuned.

PS - The end goal will be to have 0 requests, but there is a limitation with components that prevents this for now.


Hi @tshenry, is it viable for this change to the badge link to be configurable?

When showing a badge in the topic view, I can already see that a specific user has a specific badge, making the click-through feel redundant. I prefer the previous behavior of clicking through to see all users with a specific badge, as it quickly gives me additional information instead of just a different view of the same user.

Thanks for your work, our community very much enjoys this!

1 Like
(Bart) #16

It would be neat if you could do this on a per-link basis by adding an optional parameter to the link (eg. add the parameter -> links to the user’s badge page):

(david) #17

I’ve been attempting to move where the post badges display on posts. The approach I’m trying to take is creating a div above the post controls, and popping the css in there but I’m not super great with web design. If anybody has a suggestion on how to do this, I’d very much appreciate it, please and thank you!

(Justin Thurer) #18

This is excellent, thank you so much! Would love to be able to have users decide which badges they’d want/not want displayed on an individual level in the future - totally understand if this isn’t feasible though. :smile:

(david) #19

Would be great if feasible. I actually had a user who wanted this very feature. On our old forum we didn’t have that sort of functionality, so I was surprised they even thought of it.

1 Like
(Justin Thurer) #20

That’s good to know that there’s other interest!