Add users avatar on the created by column

[Former Member]

This will add users avatar (small)
Above each of their usernames on the created by column

Tested Using Latest Versions:
 IE 11 - Chrome - Firefox
And Win 10 New Browser Microsoft Edge


Go admin > Board > Thread List

Look for the line

<td class="created-by clickable">$[thread.created_by]</td>


And replace that with the line below



<td class="created-by clickable"><center>$[thread.created_by_user.avatar_quote]$[thread.created_by]</center></td>


NOW GO TO


Admin > THEMES > ADVANCED STYLES & CSS > STYLE SHEET

AND AT THE VERY BOTTOM OF THE STYLE SHEET PAGE

ADD THE LINE OF CODE BELOW

.created-by .avatar-wrapper {display: block;}

Note: You may have to manually  update your other themes for the avatar to display on those themes also

Screen shot shows users avatars above each username





OR

If you don't want the little profile icon to show on the created by column

Go admin > Board > Thread List

Change $[thread.icon]  at the top of the template

To
$[thread.created_by_user.avatar_quote]

Screenshot




If you want the avatar to show a little larger

Then use

<td class="created-by clickable"><center>$[thread.created_by.avatar_small]$[thread.created_by]</center></td>




If you wish to show what board the thread was posted in
When Viewing The Recent Threads Page

Go - Admin - Board - Thread List
And Replace this line

<td class="created-by clickable"><center>$[thread.created_by_user.avatar_quote]$[thread.created_by]</center></td>

With This Line

<td class="created-by clickable"><center>$[thread.created_by_user.avatar_quote]$[thread.created_by]{if $[route.name] == "recent_threads"}<br><i>In the board</i><br>$[thread.board]{/if}</center></td>

Then At the very bottom of the Thread List Page template
Add the code below

{if $[page] != 1 && ($[route.name] == "list_threads")}
<script>
if(document.URL.indexOf("recent") >= 0){
window.history.go(0)}
</script>
{/if}


See Screen-shot Below
Tested
Firefox - Chrome - Internet Explorer - Opera



When viewing other page numbers page 2 page 3 and so on
it will refresh the page to show what board the thread was posted on

Steve

A big thank you to Stinky for the help with user avatar
And a BIG THANK YOU to " Eton Bones" for internet explorer the fix

Reminder you can always view how it will look by clicking on the preview button
Before you click to save any changes to your template

Updated Screenshots

____________________________________________________

Tested using windows 10
Chrome - Firefox - Microsoft browser edge - IE 11

If you wish to circle the avatars

Note this is for small Avatars not the little quote avatars

Screenshot



Go admin > Board > Thread List

Look for the line


<td class="created-by clickable">$[thread.created_by]</td>


And replace that with the line below


<td class="created-by clickable"><center>$[thread.created_by_user.avatar_small]$[thread.created_by]</center></td>


Then go to STYLE SHEET

And add this to very bottom of the style sheet

.created-by .avatar-wrapper {display: block;}
.threads .avatar_size_small { .rounded-corners(50%, 50%, 50%, 50%); }
.threads .avatar_size_small > img { .rounded-corners(50%, 50%, 50%, 50%); }

.threads .avatar_size_small img {
border-radius: 100px;
height: 100%; width: 100px;
;border:1px solid #cccccc;
}


Note: it's set at 100px - setting it at 100% will oval the avatars
On pages 1,2,3 ect

[Former Member]

Updated!  See post above to either show the little avatar on the created by column

Or

Show the the little avatar icon on the thread icon column - See screenshots above

Steve

[Jen Parsons]

Thank you for this.

I'll link back to this thread for any theme I include this in.  

[Former Member]

Hmmmm It seems to be an IE issue  using firefox - Chrome all aligns centre

I'm seeking help with it - see this thread support.proboards.com/post/5497182/thread
Hopefully someone reading may be able to help as to why it not aligning centre on IE

Steve

[Former Member]

Aug 24, 2013 14:02:09 GMT -8 jrryan said:

Steve this is cool but the avatar doesn't center above the username on my forum?

betaitistheride.freemessageboards.com/board/32/general-scooter-board

See the first post for the fix

[Stinky666]

Aug 25, 2013 23:30:03 GMT -8 @xsteveuk said:

Aug 24, 2013 14:02:09 GMT -8 jrryan said:

Steve this is cool but the avatar doesn't center above the username on my forum?

betaitistheride.freemessageboards.com/board/32/general-scooter-board

See the first post for the fix

His name is Eton, not Eaton.. lol
Chris

Glad he fixed it though

[Former Member]

Hehehe Thanks Stinky666 In all the excitement I spelt his name wrong oh dear - I corrected it

[Cyprien]

Is there any way to have something like this at the bottom of the Home page where the user's avatars show up next to their name on the online list?

[Former Member]

Aug 26, 2013 15:22:58 GMT -8 Cyprien said:

Is there any way to have something like this at the bottom of the Home page where the user's avatars show up next to their name on the online list?

I believe there is a plugin by Peter - support.proboards.com/post/4983884/thread
That will add a icon next to username - If that helps

Steve

[Jen Parsons]

I saw you added browsers this will work in. I'm using this in Safari and it's working fine. 

[Former Member]

UPDATE!

I have updated the first page to give the option to show
What board the thread was posted in - When viewing the recent threads page

Steve

[Former Member]

Thanks - jrryan I updated the page - Sorry about that!

Steve

[blueshead]

This was very nice..Used it on 2 of my themes..Thank you very much!..

[Sophia]

Wow, incredible template! Implemented

[SuperChick]

Forum URL: heroestherpg.proboards.com/

@xsteveuk - I am tweaking the code for this in my thread list, and have removed the grid titles on my main page (replies, posts, etc). What I am discovering is that the titles on the thread list for "subject" "created by" "last post" are not lining up properly along the top to the column below. The same is happening on my main page when I allow the board icons, it pushes everything over to the right a bit far. The main page isn't as big of a deal to me as the titles are invisible (ie not there) and I know it probably has nothing to do with your code here, but on the thread list pages, I'd like the columns aligned to their titles. A quick fix in coding perhaps?