Is there a Points Plugin that allows for images instead of custom titles?

Question

...or does the allowable HTML when setting up titles allow me to just post images instead of Titles?

For example, instead of:

Rank 1 = 100 pts "Knowledgable"
Rank 2 = 200 pts "King"
Rank 3 = 300 pts "Master"

I'd like to have the following corresponding image display instead of a custom title.

Rank 1 = 100pts - Display Image ../rank1.jpg
Rank 2 = 200pts - Display Image ../rank2.jpg
Rank 3 = 300pts - Display Image ../rank3.jpg

Example:

Notice in the first question I am using text to represent the rank, in this case, eparisek has achieved Private First Class.  In the second question example, I am representing the rank/title with the insignia of PFC as an image.  Of course, it would be properly spaced and shown on all other pages where rank/titles are represented.

 

---

Update:
Using last listed suggestions to use custom images to show users examples:
I set all borders to zero (0) and used white backgrounds surrounding my images.  Images vary around 30 to 35 pixels square.

Question Page with Images as Titles

Profile Page using Images as Titles

Comments

I am interested in your question.
1. Can you express output results of "question list" and "single question page" with screen captcha?
2. Q2A has "custom user title" feature. What is your hope different from that?
    Admin > Users > "User titles based on points" <== HTML allowed.

---

Thank you for replying.  Sure.

Basically, instead of text rank/titles for a certain number of achieved points, I'd like to represent rank/titles as an image.  I do not have enough HTML knowledge to do this myself.

So, Under Admin > Users > User titles based on IMAGES.  

Setup:

100 points = ../image100.jpg
250 points = ../image 250.jpg
400 points = ../image400.jpg

Although HTML is allowed, how would one display the users rank on Users tab, Profile, Questions (previously answered by each user)..etc.  I don't think this one HTML allowed location would provide the images for everywhere else.

Edit - I added an image example to the main question of this post.

Does this help?

---

Good follow up. Thanks.

---

Good follow up derived from great instructions.  Thank YOU!

Answer 1

This is a (user title settings) example. Is this useful for you?

Output:

Settings:

"Admin" > "Users" > "User titles based on points:"

• <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#000000;color:white;border:2px outset #CFB53B;" title="Master"><i class="fa fa-trophy" aria-hidden="true"></i>Master</span>
  300
• <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#7b1005;color:white;border:2px outset #CFB53B;" title="King"><i class="fa fa-trophy" aria-hidden="true"></i>King</span>
  200
• <span style="display:inline-block;font-size:80%;line-height:1;padding:1px 2px;background-color:#045289;color:white;border:2px outset #CFB53B;" title="Knowledgable"><i class="fa fa-trophy" aria-hidden="true"></i>Knowledgable</span>
  100

If your theme supports FontAwesome, Trophy icon will be shown.

Comments

Originally, user title should be shown before user handle. This may be a small issue of the theme.

---

I really appreciate your work.  I was really looking for images.  With that, I later thought they would need to be size restricted due to space limitation on various pages, regardless of the images actual size, if that's possible.

Also, wouldn't it be easiest (sorry, not assuming it's just easy) if the coding was static, such as  title1.jpg, title2.jpg, title3.jpg, etc.   referring to the coding on pages that would display these tank/title images.  And then he user(s) only need to add the images to their ../qa folder with the corresponding filenames.

I have absolutely no idea how one would do this, so please forgive my ignorance if this is blatantly impossible.

Again, I really appreciate your time and effort.

---

I posted one example of "text based inline styles" on my answer so that even people without style sheets knowledge can set it. A lot of user titles are shown on various pages. Therefore, user title HTML should be shorter.

I will show another example.

"Admin" > "Layout" > " Custom HTML in <head> section of every page:"

<style>
.qa-user-title {
    display:inline-block;
    font-size:80%;
    font-weight: normal;
    line-height:1;
    padding:1px 2px;
    background-color:#000000;
    color:white;
    border:2px outset #CFB53B;
    margin-right:0.25em;
}
.qa-user-title-1 {
    background-color:#000000;
}
.qa-user-title-2 {
    background-color:#7b1005;
}
.qa-user-title-3 {
    background-color:#045289;
}
.qa-user-title-4 {
    background-color:#9E9E9E;
    border: none;
    border: 1px solid #7e7e7e;
}
.qa-user-title-5 {
    background-color:#9E9E9E;
    border: none;
    border: 1px solid #7e7e7e;
}
</style>

"Admin" > "Users" > "User titles based on points:"

<span class="qa-user-title qa-user-title-1">Master</span>
1000
<span class="qa-user-title qa-user-title-2">Seasoned</span>
500
<span class="qa-user-title qa-user-title-3">Ace</span>
300
<span class="qa-user-title qa-user-title-4">Regular</span>
100
<span class="qa-user-title qa-user-title-5">Rookie</span>
0

This is settings of my system. Actually, user title styles are defined in the theme CSS. You can check HTML and style code with development tool of your browser.

http://www.powerqa.org/qa/

Addition, you can also use images (JPEG, animated GIF, PNG) as user titles. Since image (IMG tag) is an inline element, style code of user title will be easier.

Example1 (inline image):

<img class="qa-user-title qa-user-title-1" src="http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-1.png">
1000
etc, etc

By specifying the width with the style sheet, you can change the size of the image for each page.
.qa-user-title {
width:100px;
...
}
.qa-template-question .qa-user-title {
width:150px;
...
}

Example2 (background image):

<span class="qa-user-title qa-user-title-1">Master</span>
1000
etc, etc

.qa-user-title {
width:100px;
height: 50px;
background-repeat: no-repeat;
background-position: left top;
...
}
.qa-user-title-1 {
background-image: url(http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-1.png);
}
.qa-user-title-2 {
background-image: url(http://your-site-url/qa-theme/SnowFlat/images/qa-user-title-2.png);
}
...

---

Perfect, thank you so much.  I removed the borders (just made all borders 0) from the CSS for all the title images so only the image is displayed and it looks great.  

I added two screenshot examples of what I did with Images as Titles using military rank.

Thank you so much!

Answer 2

You can check badges plugin...there is demo on below site...check

http://demo.question2answer.info

Comments

I did already and this does not touch titles, thank you.