Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.

Thread: 

Display Avatars in Threadlist & Search like XenForo

Ads
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#1
Support Team
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 threadusernameu.username 

Replace it with this code:
PHP Code:
SELECT t.*, {$ratingadd}t.username AS threadusernameu.usernameu.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 userusernamep.displaystyle AS threadprefix 

Replace it with this code:
PHP Code:
SELECT t.*, u.username AS userusernamep.displaystyle AS threadprefixu.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!
001_thumbup

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 Smile
victor Offline referral

Posts: 638
Joined: Jun 2013
Reputation: 33

#2
Senior Member
Great end very easy tutorial Marcus lots of detail I love it! Yeah I also don't recommend plugins for such a simple job!!!!
maya Offline referral

Posts: 1,058
Joined: May 2013
Reputation: 34

#3
Posting Freak
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
Midori Offline referral

Posts: 41
Joined: Apr 2014
Reputation: 1

#4
Junior Member
Thanks
How can we set for last posters avatar in threadlist ?
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#5
Support Team
(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-colorrgb(252252255);
padding2px;
border1px solid #a5cae4;
border-radius4px
max-height36px;
max-width36px;
}

#tvatar2 img {
positionabsolute;
displayblock;
margin3px 0 0 -22px;
background-colorrgb(252252255);
border1px solid #a5cae4;
border-radius3px;
max-height20px;
max-width20px;



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 Smile


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 Smile
Midori Offline referral

Posts: 41
Joined: Apr 2014
Reputation: 1

#6
Junior Member
Thank you very much and 1+Rep .
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#7
Support Team
Thanks very much if you have feather questions please feel free to ask Smile
Midori Offline referral

Posts: 41
Joined: Apr 2014
Reputation: 1

#8
Junior Member
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 .
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

#9
Support Team
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-colorrgb(252252255);
padding2px;
border1px solid #a5cae4;
border-radius4px
max-height36px;
max-width36px;

Midori Offline referral

Posts: 41
Joined: Apr 2014
Reputation: 1

#10
Junior Member
Now it is perfect , Thanks . Heart001_tt1
ivan Offline referral

Posts: 713
Joined: Jul 2013
Reputation: 6

#11
Senior Member
You should probably make last poster avatar smaller than other avatar because it could be confusing for users.
Tbo29 Offline referral

Posts: 5
Joined: Jun 2014
Reputation: 0

#12
Junior Member
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?
marcus_avrelius Offline referral

Posts: 2,424
Joined: May 2013
Reputation: 102

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





User(s) browsing this thread: 1 Guest(s)