Forum Display Enhancements - User Avatars In Thread Listing

Download vB 3.8.x Compatible Version Here

What does this plugin do?

This plugin add user avatars to the thread listing in forum display page. See the sceenshot for sample.



How to Install the plugin?

This plugin requires you edit vBulletin templates.

Import the xml file from the product manager..

Edit the threadbit template.

Find

<vb:if condition="$show['threadicon']">

And add the following just above it.

<a href="{vb:link member, {vb:raw thread}, null, 'postuserid', 'postusername'}"><img height="32px" width="32px" style="float:left;margin-right:4px" src="{vb:raw thread.avatarurl}" border="0" /></a>

Find

<dt>{vb:rawphrase last_post_by}</dt>

Please note: Some custom templates have the above code as

<dt class="lastpostby hidden">{vb:rawphrase last_post_by}</dt>

And add the following just above it.

<a href="{vb:link member, {vb:raw thread}, null, 'lastposterid', 'lastposter'}"><img height="32px" width="32px" style="float:left;margin-right:4px" src="{vb:raw thread.lastposteravatarurl}" border="0" /></a>

Edit forumhome_forumbit_level1_post and forumhome_forumbit_level2_post templates as follows.

Find

{vb:raw forum.lastpostinfo}

And add the following code just above it.

<a href="{vb:link member, {vb:raw forum}, null, 'real_lastposterid', 'real_lastposter'}"><img height="48px" width="48px" style="float:left;margin-right:4px" src="{vb:raw forum.avatarurl}" border="0" /></a>

Edit search_threadbit

Find the first occurrence of

<div class="inner">

And add after that

<a href="{vb:link member, {vb:raw thread}, null, 'postuserid', 'postusername'}"><img height="32px" width="32px" style="float:left;margin:7px 4px 0 0" src="{vb:raw thread.avatarurl}" border="0" /></a>

Then again find

<dl class="threadlastpost td">

And add after that

<a href="{vb:link member, {vb:raw thread}, null, 'lastposterid', 'lastposter'}"><img height="32px" width="32px" style="float:left;margin-right:4px" src="{vb:raw thread.lastposteravatarurl}" border="0" /></a>

Edit search_results_postbit

Find

<div class="contact">

And add after that

<a href="{vb:link member, {vb:raw post}, null, 'userid', 'username'}"><img height="32px" width="32px" style="float:left;margin-left:4px" src="{vb:raw post.avatarurl}" border="0" /></a>

Upgrading Instructions

If you are upgrading the plugin, just import the new plugin file and overwrite the existing plugins. Once done make the necessary edits to the search templates.

Credits

1. Last poster's avatar idea by James from VirtueScience

Support

This plugin is supported, so you can post your issues and queries either on my blog or in comments below.

If you would like to Optimize your vBulletin for Less Server Load & Better User Experience, read this post on Optimizing vBulletin

History

Updated 21st August

1. Added support for avatars in search results.
2. Fixed bug for thread started by guests.

Updated 18th August

1. Avatar of sub forums last post bug fixed.

Updated 17th August

1. Added Support for avatars in forumhome
2. Avatars linked to member urls

Enjoy!!!

[nCODE]

OOO... this looks awesome!!

is there by chance make the avatar the status icon? like totally opaque if there's an unread post and make it 50% transparent if there's no unread post and also a nice border will be awesome...

THANKS!!

anyways, here's something from me:
for a nice border, you have to do the following

[NOTE: You can only use this if you have upgraded to the newer version: 1.01]

Go to: AdminCP --> Styles & Templates --> The "<<>>" button of your template
select Additional.css from CSS Templates and add this at the very bottom:

/**
* Avatar border by nCODE
*/
a.aw-avatar 
{ 
    *cursor: pointer; /* IE7 refuses to do this */ 
} 

.aw-avatar img,
.aw-avatar .img,
.aw-avatarCropper
{
    background-color: rgb(252, 252, 255);
padding: 2px;
border: 1px solid #a5cae4;
border-radius: 4px; -webkit-border-radius:  4px; -moz-border-radius:  4px; -khtml-border-radius:  4px;

}


    .aw-avatar .img
    {
        display: block;
        background-repeat: no-repeat;
        background-position: 2px 2px;
        text-indent: 1000px;
        overflow: hidden;
        white-space: nowrap;
        word-wrap: normal;
    }

then you have to edit the threadbit template:
find:

<a href="{vb:link member, {vb:raw thread}, null, 'postuserid',  'postusername'}"><img height="32px" width="32px"  style="float:left;margin-right:4px" src="{vb:raw thread.avatarurl}"  border="0" /></a>

replace with:

<a class="aw-avatar" href="{vb:link member, {vb:raw thread},  null, 'postuserid', 'postusername'}"><img height="32px"  width="32px" style="float:left;margin-right:4px" src="{vb:raw  thread.avatarurl}" border="0" /></a>

find:

<a href="{vb:link member, {vb:raw thread}, null,  'lastposterid', 'lastposter'}"><img height="32px" width="32px"  style="float:left;margin-right:4px" src="{vb:raw  thread.lastposteravatarurl}" border="0" /></a>

replace with:

<a class="aw-avatar" href="{vb:link member, {vb:raw thread},  null, 'lastposterid', 'lastposter'}"><img height="32px"  width="32px" style="float:left;margin-right:4px" src="{vb:raw  thread.lastposteravatarurl}" border="0" /></a>

Edit forumhome_forumbit_level1_post and forumhome_forumbit_level2_post templates as follows.

Find:

<a href="{vb:link member, {vb:raw forum}, null, 'real_lastposterid', 'real_lastposter'}"><img height="48px" width="48px" style="float:left;margin-right:4px" src="{vb:raw forum.avatarurl}" border="0" /></a>

Replace with:

<a class="aw-avatar" href="{vb:link member, {vb:raw forum}, null, 'real_lastposterid', 'real_lastposter'}"><img height="48px" width="48px" style="float:left;margin-right:4px" src="{vb:raw forum.avatarurl}" border="0" /></a></a>

P.S. This same coding can also be found here

[Abhik]

Thanks Shabbir.. Looks awesome.

[Taurus1]

Great stuff. Thank you. Now if I could just find something similar for the forumhome template, then I will be in heaven...lol!

[shabbirbhimani]

Originally Posted by nCODE

OOO... this looks awesome!!

is there by chance make the avatar the status icon? like totally opaque if there's an unread post and make it 50% transparent if there's no unread post and also a nice border will be awesome...

THANKS!!

That should not be very difficult to extend but as of now I have no plans doing it.

Originally Posted by Taurus1

Great stuff. Thank you. Now if I could just find something similar for the forumhome template, then I will be in heaven...lol!

What do you want on forumhome?

[Taurus1]

Avatars next to last posts. As shown where with red arrow. And I will be prepared to pay for something like that.

Attachment 132002

[shabbirbhimani]

Originally Posted by Taurus1

Avatars next to last posts. As shown where with red arrow. And I will be prepared to pay for something like that.

Attachment 132002

Yes I can get that done. If there are few people looking for that I can extend the plugin or else I can get it done only for you. I am open to both.

[Taurus1]

Originally Posted by shabbirbhimani

Yes I can get that done. If there are few people looking for that I can extend the plugin or else I can get it done only for you. I am open to both.

That sounds great! Thank you. Just shoot me a PM when you are done, and we can chat about the funds.

[nCODE]

Originally Posted by shabbirbhimani

That should not be very difficult to extend but as of now I have no plans doing it.

It would be really helpful you know... and also, the product works perfectly with vB 4.1.5 so you should make changes to the description...

[Schoelle]

Originally Posted by Taurus1

Avatars next to last posts. As shown where with red arrow.

That would be a nice feature! And if possible make it selectable if a click on the avatar would bring you to the user profile or to the first unread message or the last message