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!!!

[shabbirbhimani]

Originally Posted by ku-med

Thanks for your support

>> forumhome_lastpostby template

<vb:if condition="$show['lastpostinfo']">
	<p class="lastposttitle">
	<vb:if condition="$lastpostinfo['prefix']">{vb:raw lastpostinfo.prefix}</vb:if>
	<a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_newpost}}" class="threadtitle" title="{vb:rawphrase go_first_unread_in_thread_x, {vb:raw lastpostinfo.lastthread}}">{vb:raw lastpostinfo.trimthread}</a>
	<a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_lastpost}}#post{vb:raw lastpostinfo.lastpostid}"><img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" /></a>
	</p>
<a href="{vb:link member, {vb:raw forum}, null, 'real_lastposterid', 'real_lastposter'}"><img height="48px" width="48px" style="float:right;margin-left:4px" src="{vb:raw forum.avatarurl}" border="0" /></a>
	<div class="lastpostby">
	<vb:if condition="$lastpostinfo['lastposterid']">
		{vb:raw memberaction_dropdown}
	<vb:else />
		{vb:raw lastpostinfo.lastposter}
	</vb:if>
	</div>
	<p class="lastpostdate">{vb:raw lastpostinfo.lastpostdate}<vb:if condition="!$show['detailedtime']">, <span class="time">{vb:raw lastpostinfo.lastposttime}</span></vb:if></p>
<vb:else />
	<span class="lastpostdate">{vb:raw lastpostinfo.lastpostdate} <vb:if condition="!$show['detailedtime']"><span class="time">{vb:raw lastpostinfo.lastposttime}</span></vb:if></span>
	<a href="{vb:link thread, {vb:raw threadinfo}, {vb:raw pageinfo_lastpost}}#post{vb:raw lastpostinfo.lastpostid}"><img src="{vb:stylevar imgdir_button}/lastpost-{vb:stylevar right}.png" alt="{vb:rawphrase go_to_last_post}" /></a>
</vb:if>

I don't see any reason for editing that template. I don't have any instructions to do that either.

Can you share the url of the page where you have the issue.

[Vintum]

Added on 4.2.2 and so far it works great. Thanks!

[3saltoot]

Thanks!...

[blue7]

How to round the corners of the small avatars?

Like This:

[Triky]

Originally Posted by blue7

How to round the corners of the small avatars?

Like This:

You can do that with border-radius. Eg <img style="border-radius: 10px;" .. />

[mangmel]

working well 4.2.3

[markoroots]

Really great. Very useful plugin.

[ringnews24]

How do I add a default avatar?

Thanks - Brill plugin

[dany_danay]

Works great

[HM666]

Works great! Thanks. I did add some css to make the avatars round as mentioned in a previous comment. For those who are unsure of how to do that here is what you will need to do:

On the first HTML code that you need to add to your threadbit template make the following changes to the code:

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

You can certainly change the border color to a color you prefer on any of these.

border:1px solid #000000;

Change the hex color shown in bold red to a color of your choice. The color I have it set as is black.

forumhome_forumbit_level1_post and forumhome_forumbit_level2_post:

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

search_threadbit:

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

2ND search_threadbit:

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

search_results_postbit:

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

Hope this helps some achieve round avatars