Display Avatars in Threadlist & Search like XenForo

What's up ladies how are you doing today? So, what are we going to talk about here, today I will show you how you can show author avatar next to the thread in MyBB forum Threadlist and Search templates! Most tutorials out there only explain how to display avatars in threadlist like XenForo but they say nothing about how to show avatars in Search results, so let me show you how to do that!

First lets add avatars to Threadlist.

Open forumdisplay.php and find:

PHP Code:

SELECT t.*, {$ratingadd}t.username AS threadusername, u.username 


Replace it with this code:

PHP Code:

SELECT t.*, {$ratingadd}t.username AS threadusername, u.username, u.avatar 


Now find:

PHP Code:

$thread['pages'] = 0;
$thread['multipage'] = '';
 $threadpages = '';
$morelink = '';
$thread['posts'] = $thread['replies'] + 1; 


Above add this code:

PHP Code:

if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     } 


The final code should look like this:

PHP Code:

if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     }
$thread['pages'] = 0;
$thread['multipage'] = '';
$threadpages = '';
$morelink = '';
$thread['posts'] = $thread['replies'] + 1; 


Now lets add avatars to Search results.
Notice! We are only going to be adding avatars to search results threads not posts as it makes no sense heaving avatars in posts template since the results are shoving posts not threads!

Open search.php and find:

PHP Code:

SELECT t.*, u.username AS userusername, p.displaystyle AS threadprefix 


Replace it with this code:

PHP Code:

SELECT t.*, u.username AS userusername, p.displaystyle AS threadprefix, u.avatar 


Now find:

PHP Code:

$thread['pages'] = 0;
$thread['multipage'] = '';
$threadpages = '';
$morelink = '';
$thread['posts'] = $thread['replies'] + 1; 


Add this code just above it:

PHP Code:

if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     } 


The final result will look this:

PHP Code:

if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     }
$thread['pages'] = 0;
$thread['multipage'] = '';
$threadpages = '';
$morelink = '';
$thread['posts'] = $thread['replies'] + 1; 


Ok this concludes PHP editing part now we are going to edit templates!

Go to ACP >> Templates & Style >> Templates >> Your Template >> Forum Display Teamples > Forumdisplay_thread

Inside the template find:

PHP Code:

<div>
            <span>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span>
            <div class="author smalltext">{$thread['profilelink']}</div>
        </div> 


Now replace the whole code above with this one:

PHP Code:

<div>
<table><tr><td id="tvatar">{$thread_avatar}</td><td>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}<br> {$thread['profilelink']}</td></tr></table>
</div> 


Go to ACP >> Templates & Style >> Templates >> Your Template >> Search Teamples > search_results_threads_thread

Inside the search template find:

PHP Code:

<div>
<span>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread_link}{$highlight}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span><div class="author smalltext">{$thread['profilelink']}</div>
</div> 


Now replace it with this one:

PHP Code:

<div>
<table><tr><td id="tvatar">{$thread_avatar}</td><td>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}<br> {$thread['profilelink']}</td></tr></table>
</div> 


Lastly we need to add CSS style to our avatars so add this css your global.css

Code:

#tvatar img {
background-color: rgb(252, 252, 255);
padding: 2px;
border: 1px solid #a5cae4;
border-radius: 4px;
max-height: 36px;
max-width: 36px;
}

That is it ladies if you have any question please feel free to post them below or if you found an error I made (I am a person so I do make mistakes) please report it!


Important! If you believe you can just use a plugin for this then you have to know that a plugin will multiply your SQL queries x2.
Without plugin: SQL queries 21, with plugin: SQL queries 42 or in some case even more, this increases server and SQL load so don't use plugin unless you don't care about server load neither queries

Find

Reply

Great end very easy tutorial Marcus lots of detail I love it! Yeah I also don't recommend plugins for such a simple job!!!!

Find

Reply

Great post @Marcus, heaving avatars in forum display looks great adds character to the forum, it looks much better heaving threads with the author's avatar than just heaving bare threads

Find

Reply

Thanks
How can we set for last posters avatar in threadlist ?

Find

Reply

(04-10-2014 05:31 PM)Midori Wrote:  Thanks
How can we set for last posters avatar in threadlist ?

The first post only shows how to display thread author avatar in threadlist but this post will teach you how to display author avatar and last poster avatar in threadlist so lets get started!

Open forumdisplay.php and find this code:

PHP Code:

$query = $db->query("
        SELECT t.*, {$ratingadd}t.username AS threadusername, u.username
        FROM ".TABLE_PREFIX."threads t
        LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid = t.uid)
        WHERE t.fid='$fid' $tuseronly $tvisibleonly $datecutsql2
        ORDER BY t.sticky DESC, {$t}{$sortfield} $sortordernow $sortfield2
        LIMIT $start, $perpage
    "); 


Replace it with this one:

PHP Code:

$query = $db->query("
        SELECT t.*, {$ratingadd}t.username AS threadusername, u.username, u.avatar, lp.avatar AS lpavatar
        FROM ".TABLE_PREFIX."threads t
        LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid = t.uid)
        LEFT JOIN ".TABLE_PREFIX."users lp ON (lp.uid=t.lastposteruid) WHERE t.fid='$fid' $tuseronly $tvisibleonly $datecutsql2
        ORDER BY t.sticky DESC, {$t}{$sortfield} $sortordernow $sortfield2
        LIMIT $start, $perpage
    "); 


Now in the same forumdisplay.php find:

PHP Code:

$thread['pages'] = 0; 


Add this code above it:

PHP Code:

//avatar
     if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     }
     
     if(!$thread['lpavatar']) {
     $thread_lpavatar = "<a href='member.php?action=profile&uid={$thread['lastposteruid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['lastposter']}' />";
     }
     else
     {
     $thread_lpavatar = "<a href='member.php?action=profile&uid={$thread['lastposteruid']}'><img src='{$thread['lpavatar']}' alt='' title='{$thread['lastposter']}' />";
     }
    //avatar end 


Open Forumdisplay_thread template replace:

PHP Code:

<div>
            <span>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span>
            <div class="author smalltext">{$thread['profilelink']}</div>
        </div> 


With this one:

PHP Code:

<div>
            <table><tr><td id="tvatar">{$thread_avatar}<td id="tvatar2">{$thread_lpavatar}</td></td><td>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}<br> {$thread['profilelink']}</td></tr></table>
        </div> 


Finally add this css style to your global.css:

PHP Code:

#tvatar img {
background-color: rgb(252, 252, 255);
padding: 2px;
border: 1px solid #a5cae4;
border-radius: 4px; 
max-height: 36px;
max-width: 36px;
}

#tvatar2 img {
position: absolute;
display: block;
margin: 3px 0 0 -22px;
background-color: rgb(252, 252, 255);
border: 1px solid #a5cae4;
border-radius: 3px;
max-height: 20px;
max-width: 20px;
} 


That it. Remember that this is completely different tutorial from the one above!

If you would like last poster avatar to show in different location please let me know about it


To show last poster avatar in search results threads.

Open search.php and find:

PHP Code:

$query = $db->query("
            SELECT t.*, u.username AS userusername, p.displaystyle AS threadprefix
            FROM ".TABLE_PREFIX."threads t
            LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=t.uid)
            LEFT JOIN ".TABLE_PREFIX."threadprefixes p ON (p.pid=t.prefix)
            WHERE $where_conditions AND {$unapproved_where} {$permsql} AND t.closed NOT LIKE 'moved|%'
            ORDER BY $sortfield $order
            LIMIT $start, $perpage
        "); 


Replace with this one:

PHP Code:

$query = $db->query("
            SELECT t.*, u.username AS userusername, p.displaystyle AS threadprefix, u.avatar, lp.avatar AS lpavatar
            FROM ".TABLE_PREFIX."threads t
            LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=t.uid)
            LEFT JOIN ".TABLE_PREFIX."threadprefixes p ON (p.pid=t.prefix)
            LEFT JOIN ".TABLE_PREFIX."users lp ON (lp.uid=t.lastposteruid) WHERE $where_conditions AND {$unapproved_where} {$permsql} AND t.closed NOT LIKE 'moved|%'
            ORDER BY $sortfield $order
            LIMIT $start, $perpage
        "); 


Then find:

PHP Code:

$thread['pages'] = 0; 


And add this code above it:

PHP Code:

//avatar
     if(!$thread['avatar']) {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['username']}' /></a>";
     }
     else
     {
     $thread_avatar = "<a href='member.php?action=profile&uid={$thread['uid']}'><img src='{$thread['avatar']}' alt='' title='{$thread['username']}' /></a>";
     }
     
     if(!$thread['lpavatar']) {
     $thread_lpavatar = "<a href='member.php?action=profile&uid={$thread['lastposteruid']}'><img src='images/default_avatar.gif' alt='' title='{$thread['lastposter']}' />";
     }
     else
     {
     $thread_lpavatar = "<a href='member.php?action=profile&uid={$thread['lastposteruid']}'><img src='{$thread['lpavatar']}' alt='' title='{$thread['lastposter']}' />";
     }
    //avatar end 


Open search_results_threads_thread template and find:

PHP Code:

<div>
            <span>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread_link}{$highlight}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}</span>
            <div class="author smalltext">{$thread['profilelink']}</div>
        </div> 


Replace it with:

PHP Code:

<div>
<table><tr><td id="tvatar">{$thread_avatar}<td id="tvatar2">{$thread_lpavatar}</td></td><td>{$prefix} {$gotounread}{$thread['threadprefix']}<a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a>{$thread['multipage']}<br> {$thread['profilelink']}</td></tr></table>
</div> 


That is it don't forget to add css to global.css from the code above

Find

Reply

Thank you very much and 1+Rep .

Find

Reply

Thanks very much if you have feather questions please feel free to ask

Find

Reply

Thanks again but

PHP Code:

<td id="tvatar">{$thread_avatar}<td id="tvatar2">{$thread_lpavatar}</td> 


are near together . I think

PHP Code:

{$thread_lpavatar} 


must be in bottom , after {$rating} codes .

Find

Reply

Find this in forumdisplay_thread template

PHP Code:

<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;">
        <span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
        <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
    </td> 


Replace with this one:

PHP Code:

<td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: right;">
<table>
<tr>
<td class="tvatar_lastpost">{$thread_lpavatar}</td>
<td>
        <span class="lastpost smalltext">{$lastpostdate} {$lastposttime}<br />
        <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
</td>
</tr>
</table>
    </td> 


Add this css code to your global.css

PHP Code:

.tvatar_lastpost img {
background-color: rgb(252, 252, 255);
padding: 2px;
border: 1px solid #a5cae4;
border-radius: 4px; 
max-height: 36px;
max-width: 36px;
} 


Find

Reply

Now it is perfect , Thanks .

Find

Reply

You should probably make last poster avatar smaller than other avatar because it could be confusing for users.

Find

Reply

Very good tutorial. I just created all the patches with the patch plugin and then modified the templates. So when version 1.6.14 will come out I can re-apply all mods.

I see that you also use Last Poster Avatars on the Index. Looks good, are you using a plugin for that or did you also make core files modifications?

Find

Reply

I am using pretty much the same method to show lastposter avatar on home page.

Find

Reply