Individual Pseudo-Usergroup Icon in Postbit

Requested by people who wanted to choose a small icon by their name like I gave to moderators and admins via Usergroup Markup code. Obviously if it's done by usergroup it can't be done for individuals (and frankly it looks like a minor disaster in WOL if every user has an icon). This way, with only template changes, it can.

Screenshot at the bottom of the post!

INSTRUCTIONS:
AdminCP > User Profile Fields > Add New User Profile Field

Single-Line Text Box

Title: Username Icon
Description: If you would like an icon to appear next to your username when you post on the forum, enter the URL ONLY in the text box below. Do NOT include the http:// part. Maximum permitted size is 16x16 pixels.
Obviously change the pixel dimensions to whatever dimensions you would like user to post, 16x16 looks right to me.
Default Value: imagename.gif

...A few settings here which are up to your own discretion...

Profile Field Type: Single-Line Text Box
Field Required: No.
Field Editable by User: Yes
Private Field: No.
Field Searchable on Members List: No
Show on Members List: No

Which page displays this option? Edit Profile

Save the page and make a note of the field number for this custom field which is shown in the list on the User Field Manager page. If it is your first custom field then it will be field6.

Now go to AdminCP > Styles & Templates > Style Manager > Edit Templates and edit your postbit(_legacy) template.

FIND:

<if condition="$show['profile']"><a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>

REPLACE WITH:

<if condition="$show['profile']">
<if condition="$post['fieldX']"><span class="usernameicon"><div <if condition="is_browser('ie', 6)">style="margin:0;padding-right:4px;"</if>><img src="http://$post[field7]" alt="" class="inlineimg" border="0" /></div></span></if>
<a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a>

Making sure you change fieldX to field6 or the correct field number appropriate for you.

Next go to AdminCP > Styles & Templates > Style Manager > Main CSS and copy and paste the following code into the custom CSS text box at the bottom of the page, again changing the width and height pixel numbers to match the maximum size of the icon you want your members to use.

.usernameicon {
display:inline-block;
}
.usernameicon div {
display:inline-block;
float:left;
clear:none;
width:16px;
height:16px;
overflow:hidden;
margin:6px 6px 0 0;
}

And you're done! All your members now have to do is visit UserCP > Edit Profile and paste the URL of their chosen icon into the Username Icon text box.

Three things for you to note: There's no real restriction on the size of image people can use. The CSS ensures it won't show break your layout, since no matter how big a picture they choose only 16x16 pixels of it will show up. But it will show down page load times and waste your users bandwidth with large images, so be observant.

Secondly, this does not interfere with Usergroup Markup so you can specify an image there as well if you like.

Thirdly, this will only display to logged-in users. vBulletin does not allow Guests to pull custom user-field data so there won't be a fix as long as it remains a template mod.

Demo:


The Username Icon is the red rose on the left, the Usergroup Icon is the yellow rose on the right. If there is no Usergroup icon it will display where the yellow rose is.


Fix:
The http:// part of the URL is now set in the template code and not the user-defined text to stop the layout breaking if plain text is defined instead of an image URL. The default field text and description have been changed to reflect this. The alt text has been set to nothing for the same reason.
Fix:
CSS has been thoroughly kerjiggered so a block div will display inline next to the username. Or anything else for that matter.
Fix:
Changed the mod name to something terrible.
Fix:
IE Conditional to fix erratic IE rendering. Now aligns properly.
Fix:
AJAX posting will no longer makes the icon appear/disappear in new posts.


Current Issues
Mod name is something terrible but more accurately desciprtive.

[TygerTyger]

Hm, the CSS isn't quite right and I can't find a way to delete the modification. Odd.

Disregard this mod until I can fix it.

Edit: Fixed. Post reserved, I guess.

[Snake]

Please get over it ASAP. I can't wait to have this installed on my forums!

[TygerTyger]

Mod updated to fix the major bugs. The CSS, Template code and Custom Field text have all been changed.

[TygerTyger]

Updated again to fix erratic display in IE and funny little AJAX quirk.