Display User Number Images based on UserID

[waylandprod]

I'm working on a special configuration of our forum and running into a real pickle to figure out. My goal is to break down the user ID into individual numbers for PNG files. In other words user ID 183 would display 1.png, 8.png, 3.png.



I'm not sure how to set an if condition that would break down the Userid into those types of digits to be displayed and have it work for users 1 to 10,000.

I included a little bit of code that I was toying with, and I understand it doesn't work, but I was still trying.

UserID:
{vb:raw bbuserinfo.userid}


<img src="newartwork/numbers/3.png">

<vb:if condition="$bbuserinfo.userid == 1">
    <img src="newartwork/numbers/1.png">
</vb:if>

[kh99]

There may be some way to do it with template conditionals but I think it would be difficult. The thing to do is use a plugin to calculate the file names:

PHP Code:

$userid = $vbulletin->userinfo['userid'];
$images = array();
while ($userid > 0)
{
    $images[] = $userid % 10 . '.png';
    $userid = intval($userid / 10);
}
$images = array_reverse($images);
vB_Template::preRegister('FORUMHOME', array('images' => $images)); 


and then in the template, something like:

<vb:each from="images" value="image">
<img src="newartwork/numbers/{vb:raw image}">
</vb:each>

[waylandprod]

Awesome thanks! I'll give that a try~

[waylandprod]

What we ended up doing was just adding this to our header

<div class="roomNumber">
<div class="roomslot" id="slot1"></div>
<div class="roomslot" id="slot2"></div>
<div class="roomslot" id="slot3"></div>
<div class="roomslot" id="slot4"></div>
<div class="roomslot" id="slot5"></div>

<script>
roomNumber="{vb:raw bbuserinfo.userid}";
slot1 = ('    ' + roomNumber).slice(-5,-4);
slot2 = ('    ' + roomNumber).slice(-4,-3);
slot3 = ('    ' + roomNumber).slice(-3,-2);
slot4 = ('    ' + roomNumber).slice(-2,-1);
slot5 = ('    ' + roomNumber).slice(-1);

document.getElementById('slot1').className += ' num'+slot1;
document.getElementById('slot2').className += ' num'+slot2;
document.getElementById('slot3').className += ' num'+slot3;
document.getElementById('slot4').className += ' num'+slot4;
document.getElementById('slot5').className += ' num'+slot5;
</script>
</div>

Then we have some CSS that displays the proper image per

[kh99]

Nice - I hadn't thought of doing it in javascript. Thanks for posting that.