Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Guide

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?

8 Replies 8

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

Checkout some of the stuff i've built using the platform:
Community l Ideation l Blog l Product Hubs l Check & Report l Service Status 

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

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

 

@mandychin

 

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

 

Jason

Generic1.jpg

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?

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

 

Good luck,

 

Jason

Generic1.jpg

thanks @JasonHill

Khoros Alumni (Retired)

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.

Khoros Best Practice until August 2019. Onwards posting as Claudius.
Learn how to master Khoros. Learn Best Practice in the Community Documentation
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.

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

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.