[vBulletin] Style-Specific Rank Images

As someone who used phpBB2 for the longest time, I was surprised to find that vBulletin 3x doesn't make the same accommodations for those who want to add style-specific rank images, or rank images that appear only for the style(s) you want. There was nothing in the "Mods" section that seemed to address the issue, and though there are plenty of requests to be found in the topics lists of vB org, vB com, and other vB sites, the most common answer is that it cannot be done (unless someone submitted a mod). A less frequent response, but the most promising one, is to use the Replacement Variable Manager in the AdminCP. Unfortunately, this method did not work for me. Also, some novice administrators may have trouble properly using replacement variables, as even seasoned vBulletin users acknowledge that it could be tricky.

That said, I discovered a method that I think is simpler, and I owe thanks to user who submitted the helpful post I unexpectedly found in an only somewhat relevant topic from 2004. That post, "vBulletin.org Forum - View Single Post - Groupicons," informs the reader that, by inserting a certain code into the "postbit"—or "postbit_legacy", if user info is aligned to the left of each post— template, you can get any icon to appear based on what user group that member belongs to (e.g., Administrator, Moderator, Member, and etc).

Obviously, since the code is applied to the file ("postbit" or "postbit_legacy") of the one style, the image(s) you choose will only appear in that style. Anyways, here is that code:

Code:

<if condition="$post[usergroupid]==x"> IMG VAR HERE </if>

The person who provided this code said that "x" should be replaced by the user group ID (found in drop-down box in AdminCP > Usergroups). In addition, "IMG VAR HERE" should be replaced with the HTML for the image you want to display (more on that below).

Now, using the above code as my starting point, I took a look at the "postbit" template for my forum's default template, Enlighten. The point where the above code should be inserted is inline directly after this:

Code:

<if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>
<if condition="$post['rank']"><div class="smallfont">$post[rank]</div>

As you know, that last line starting with "<if" and ending with "</div>" is what displays the text rank under your user name (and user title, if you have one). So here is how I modified the above code:

Code:

                <if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>
<if condition="$post['rank']"><div class="smallfont">$post[rank]</div><if condition="$post[usergroupid]==6"><img src="enlighten/ranks/stars_orange.gif"/></if><if condition="$post[usergroupid]==5"><img src="enlighten/ranks/stars_red.gif"/></if><if condition="$post[usergroupid]==26"><img src="enlighten/ranks/stars_0.gif"/></if><if condition="$post[usergroupid]==15"><img src="enlighten/ranks/stars_1.gif"/></if><if condition="$post[usergroupid]==16"><img src="enlighten/ranks/stars_1.gif"/></if><if condition="$post[usergroupid]==17"><img src="enlighten/ranks/stars_2.gif"/></if><if condition="$post[usergroupid]==18"><img src="enlighten/ranks/stars_2.gif"/></if><if condition="$post[usergroupid]==19"><img src="enlighten/ranks/stars_3.gif"/></if><if condition="$post[usergroupid]==20"><img src="enlighten/ranks/stars_3.gif"/></if><if condition="$post[usergroupid]==21"><img src="enlighten/ranks/stars_4.gif"/></if><if condition="$post[usergroupid]==22"><img src="enlighten/ranks/stars_4.gif"/></if><if condition="$post[usergroupid]==23"><img src="enlighten/ranks/stars_5.gif"/></if></if>

That is taken from the Enlighten template. Here is how it looks on Greenfox, my other template, though:

Code:

                <if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>
<if condition="$post['rank']"><div class="smallfont">$post[rank]</div><if condition="$post[usergroupid]==6"><img src="images/greenfox/ranks/stars_orange.gif"/></if><if condition="$post[usergroupid]==5"><img src="images/greenfox/ranks/stars_red.gif"/></if><if condition="$post[usergroupid]==26"><img src="images/greenfox/ranks/stars_0.gif"/></if><if condition="$post[usergroupid]==15"><img src="images/greenfox/ranks/stars_1.gif"/></if><if condition="$post[usergroupid]==16"><img src="images/greenfox/ranks/stars_1.gif"/></if><if condition="$post[usergroupid]==17"><img src="images/greenfox/ranks/stars_2.gif"/></if><if condition="$post[usergroupid]==18"><img src="images/greenfox/ranks/stars_2.gif"/></if><if condition="$post[usergroupid]==19"><img src="images/greenfox/ranks/stars_3.gif"/></if><if condition="$post[usergroupid]==20"><img src="images/greenfox/ranks/stars_3.gif"/></if><if condition="$post[usergroupid]==21"><img src="images/greenfox/ranks/stars_4.gif"/></if><if condition="$post[usergroupid]==22"><img src="images/greenfox/ranks/stars_4.gif"/></if><if condition="$post[usergroupid]==23"><img src="images/greenfox/ranks/stars_5.gif"/></if></if>

Don't worry about using a "<br />" tag or equivalent, as the rank image will automatically place itself below the text rank, and there will be no added line brakes no matter how many rank images you add. Also, if you closely inspect the code, you'll notice that I made some of the rank image files repeat. The reason is this: for members, I have ten text ranks, but my rank images are five stars that fill up the more you post, so I want regular members to be promoted two ranks before receiving another star.

For use at your forum, just replace the usergroup IDs with yours, and replace the directories with the ones you use for each of your templates.

There you go: style-specific rank images. I have not tried it, but I wouldn't be surprised if you can even add more than one rank image for a given user group by placing additional image variables inside the conditional for that user group. In any case, please note that the rank image will not display below the text rank in the view member profile page (that is another edit).

By Kevin Malone of The Infinity Program.

This post has been promoted to an article

 

Great tutorial!

 

teh aWeS0m3z 5aUz3 for you. Thanks!

 

<3 Mudora, have I said how much I wub chuz? ^^ This will help me greatly on Pisoga.

 

That's a really good tut. I was always wondering how could we do that.
Thanks a lot. Gonna implement it on my forum.

 

Hi, guys. When applying style-specific rank images using the method I detailed above, rank images no longer displayed in the profile. I found a way around that problem, and my findings are detailed in an article I titled, "[Profile Add-On] Style-Specific Rank Images."