Trust-Level Avatar Flair

theme-component

#1

This theme component allows an admin to add flair to user avatars based on the user’s trust level. Trust level flair displays anywhere on the site that you would normally see group flair. There are a few theme settings to adjust the position of the flair in relation to the avatar.

Basic Examples (with group flair in place)

There is also a bottom-right position that will either replace group flair or be replaced by group flair depending on how you set the “group flair always on top” setting.

Installation

See How do I install a Theme or Theme Component? And if you are brand new to themes, I highly reccomend checking out the Beginner's guide to using Discourse themes.

Import Links:

https://github.com/tshenry/discourse-trust-level-avatar-flair

Main setup

Using images as flair

You will need to add your own flair images to the theme component. A good size is around 100×100px. The one I used in the example above is 88×88px. There is a transparent template image included that can be used as a starting point.

The easiest way to add an image is to select the + Add button under the Uploads section of the theme component and choose your flair image file. Repeat this for each flair image you want to include. Once you have the images uploaded, right click on the blue link and copy the url of the image. Finally, paste the url into the trust level field of your choice.



Using Font Awesome for your flair

You can use Font Awesome icons instead of using uploaded images. A full list of available icons can be found here. All you need to do is check the setting to use Font Awesome then add the name of the icon to the appropriate flair image field:

IMPORTANT NOTE: Currently you cannot mix Font Awesome and images, if there is a strong interest in doing so, I can look into it further.

Settings

You will find that there are several settings available within this theme component. They have descriptions explaining what they do and how to use them, but if anyone has an suggestions on how to improve them to make things more clear, please let me know!

Hovering over the trust-level avatar flair will display the name of the trust level. If you wish to change the name of the trust level, you can go to Admin > Customize > Text Content and search for the following to change the names:

  • trust_levels.newuser.title
  • trust_levels.basic.title
  • trust_levels.member.title
  • trust_levels.regular.title
  • trust_levels.leader.title

About

This was inspired by the discussion started here:

Repo:

GitHub - tshenry/discourse-trust-level-avatar-flair


Please feel free to post if there are any questions, problems, or suggestions!

Automatic titles from trust groups
Proposal: Flair on avatar for trust level
Avatar Flair Image for Staff, Moderators, Admin
(Blu McCormick) #2

Thid is SO awesome!:clap:t2:

Hey, quick question. Do we have to create groups for trust levels and then manually assign members to groups per usual? Or am I reading right in that if a member is x trust level then they will be assigned x flair?


#3

It evaluates the trust-level automatically and applies the appropriate flair to every user’s avatar. No need to create specific groups for trust levels. This is supposed to make it easy :slightly_smiling_face:

You don’t have to set a flair for every trust-level either. For example: you could just add an image named new-flair to the image assets component and leave the other images with their default placeholders. With that configuration, only users that have the “new” trust-level will have trust-level flair on their avatar.


(Blu McCormick) #4

THAT right there is a game changer. I can’t wait to try it out and will be sure to check in here and show you all how I use the theme in the forum!


(Blu McCormick) #5

Where do I find theme settings?

Here is the theme page:


#6

Theme settings is a new feature (nearly a week old). I checked your forums and you don’t have it so you’ll need to upgrade your Discourse instance to see the settings (might as well need to delete and reinstall the theme).


How do I install a Theme or Theme Component?
(Blu McCormick) #7

Thanks, @vinothkannans and @Osama. I have sent a message into discoursehosting to enquire about an update. :grinning:

Can’t wait to upload these beauties onto the member avatars (TL0, TL1, TL2, TL3&4 (lounge):


(Frederik) #8

Could this one be used for profile types?

Not based an TL - but type of users in my case: Medical Student vs Medical Doctor

Then in users profile the users could choose profile type…? And then stamp the Avatar with a icon based on profile type…


(Blu McCormick) #9

That seems to me, @frold like the next step in this theme’s evolution. I bet members would love that, some other variations of the rule: if member is x variable, then assign them x flair. From what I understand currently the theme registers members’ trust level then assigns them the associated flair.

The piece of this theme that I really appreciate is I don’t have to make a group (e.g. for medical student versus doctor) then hand assign members to each group, which is how I’d imagine you’d currently have to do it.


#10

I forgot to mention that you need to be on the latest release! :flushed:

I will add that to the topic right now as that is very important! Thanks for asking about what was going on.

Also thanks @Osama for helping out with an answer (and for creating the theme settings feature for Discourse!)


(Blu McCormick) #11

Aw, no problem. I was kicking myself for not thinking of this myself as a possible solution to the theme settings not being available. Per Richard at discoursehosting, I’ll have the updated version Tuesday and be able to give you feedback (and high fives) then.


#12

This sounds more like what you would want to use the built-in group flair for since I imagine those qualities need to be determined manually. I’ll try to get back to you with instructions on how to do this later today. It’s possible that what’s currently available to groups won’t work for your given scenario. In any case, I’ll try to get back to you on this soon :grinning:


#13

I wrote up a quick how-to topic that might help you out:

So for your scenario, if you want Medical Students and Medical Doctors to define themselves, you would create a group that users can join freely (point 2 in the how-to topic), then follow points 4 and 5. Finally, I would create a pinned topic or something to let users know how to join the group that suits them.

Hopefully that helps :slight_smile: If I misunderstood what you were hoping to accomplish, let me know and I can try to help you further.


(Vaping Community) #14

Having an issue where the flairs now overlap the logo…

uk-2018-03-13-13-21-26

The Offending CSS - z-index

@if $group_flair_always_on_top == 'true' {
    .avatar-flair-image {
        z-index: 1002;
    }
} @else {
    .avatar-flair-image {
        z-index: initial;
    }
}

z-index for .d-header is

z-index: 1000;

(Blu McCormick) #15

This theme rocks!
58%20AM

Hey my friend (@tshenry), where in the code do I change the name of the flair that pops up when you hover over it?

I’d like:

0: new
1: level one
2: level two
3: think-tank
4: thank-tank


#16

Thanks for reporting! I should be able to get this fixed and the theme updated today. I’ll let you know when it’s done.


#17

Hey @McBlu! I’m glad to hear you’re liking theme. Let me see if I have time today to add that as a setting. I think it would be nice for people to be able to set without having to change the code if possible. I’ll keep you posted.


(Blu McCormick) #18

Thank you. That would be awesome.


#19

@McBlu and @Vaping_Community The fixes/additions should be in place now. You can click on the Check for Updates button on the Trust-Level Avatar Flair Theme Component and then update. Please let me know if there are any oddities that were introduced :slightly_smiling_face:

On the custom tool tip (the name that pops up when you hover over the flair), there is one area that I still need to figure out, but I’ve run out of time for today. On a collapsed profile with the lower flair positions, the tool tip is hidden beneath the container. I will fix that when I can an let you know when to update!


(Blu McCormick) #20

Nice. Love it. It is working beautifully so far that I can see. What is a collapsed profile? Do you mean this?