Highlighted

image as rank name

Hi, can I use image as my rank name or display my rank icons at the end of my rank name?

Message 1 of 9
8 REPLIES
Community Management
Gamification

Re: image as rank name

Yes you can, this is an out the box feature of the platform. When editing your Rank within admin look for the below option and add the icon URL to display for the given rank, this is then by default displayed next to the username/rank. 

 

IMG_0176.PNG

 

 

 

 

Stephen



My latest Ideas: Vanity URL Manager l @mention Roles l  LSW Password Policy


Message 2 of 9

Re: image as rank name

Hi @Fellsteruk, have tried this but the icon will only be displayed after the username with the configuration you provided as shown below. 

I prefer the rank icon to be displayed after the rank name (New-in-Town), please advise how it can be done?

rank icon test.png

 

Message 3 of 9
Community Management
Journalism

Re: image as rank name

@mandychin

 

Just use the next field on the list - Display an icon to the right of the user's name

 

Jason

Generic1.jpg

Message 4 of 9

Re: image as rank name

Hi @JasonHill@, I've already configured - Display an icon to the right of the user's name 
rank icon test2.png

I want the rank icon to be displayed to right of the RANK name, not the user's name. Is there a way to do it?

Message 5 of 9
Community Management
Journalism
Solution

Re: image as rank name

Ah sorry @mandychin. I suspect you would need some CSS trickery to achieve that. 

 

Good luck,

 

Jason

Generic1.jpg

Message 6 of 9

Re: image as rank name

thanks @JasonHill

Message 7 of 9
Community Management
Navigation
Solution

Re: image as rank name

This is fun. Thanks for giving this inspiration, @mandychin: You can actually enter HTML in the rank name and either append an <img> to your rank name text or replace it. The result is exactly what you asked for to show an icon after/instead of the rank name.

See this example I set up on a test instance (top is the author box next to a message, below the admin setting):

Rank containing imageRank containing image

Some things to keep in mind with this approach:

  • Rank name field is limited to 80 characters, so you should pick the shortest possible image path. Using community assets like in my example is a good way.
  • Images are not very accessible out of the box unless you add accessibility descriptions
  • Images - as opposed to text - need to be treated differently (via height and width styling) to be made work on a responsive design. The built in cropping for text won't work for them.

Learn how to master Lithium. Visit the Best Practice Center

Previously known as Claudius. New profile - Now even more content
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.
Message 8 of 9

Re: image as rank name

Hi @ClaudiusH this is exactly what I wanted! Thank you so much Smiley Very Happy

Message 9 of 9