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

IMPORTANT: You must be running Discourse Version 2.0.0.beta4 or later for this theme to work.

Due to current limitations, this will have to be somewhat of a “theme-ception.” There will be two theme components: one for the overall implementation of trust-level flair and one for the flair image assets. The image assets theme component will be set as a child theme of the main trust-level flair theme component.

Take a look at this for instruction on how to install the two theme components:

Import Links:

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

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

You will need to add your own flair images to the image assets theme component. A good size is around 100×100px. The one I used in the example is 88×88px. There is a transparent placeholder image by default that can be replaced for all the trust levels. You can do this by clicking the + Add button under Uploads, choosing your image, and finally entering the appropriate name. Make sure to name the images:

  • new-flair
  • basic-flair
  • member-flair
  • regular-flair
  • leader-flair

For example:

This will replace the placeholders and you will be set!

To add the image assets theme to the main theme, select the main trust-level flair theme in your admin panel and look near the bottom of the settings for a section called “Theme Components.” Select and add the theme called “Trust-Level Avatar Flair Image Assets” It should look like this:

Settings

There are settings to adjust the flair’s position relative to a user’s avatar and any existing group flair, as well as the ability to set custom tooltip text when hovering over the trust-level flair:

About

This was inspired by the discussion started here:

Repos:

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

To-Do and Future Ideas

  • Figure out how to get the flair to display in the topic map appropriately (will be posting on the dev category soon cause I’m out of ideas!) (Unless there is clear indication of a need for this, I don’t think this is really necessary given how busy it can get on the topic map avatars by default.)
  • Switch from template override to plugin outlet once the next version of Discourse drops with the outlet for profile avatar flair
  • Add setting for smaller flair sizes? (If there’s any interest)

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

Proposal: Flair on avatar for trust level
Automatic titles from trust groups
(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 L) #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?