Poster with Image

[M³]

I came across this website and really like the set up .. in terms of how everything looks somewhat like PBs .. posts/replies, the topic and person posting on the right .. but, MORE IMPORTANTLY, how the avatar image is in between the posts/replies and topic/poster.  Is there anyway to achieve this at PB? I know there's something like this already ... poster with an image, but I don't like the way it appears .. like this one does.

I would love this, if possible.  Thank you so much!

[Stinky666]

M³, using the following variable will work:
$[board.last_thread.created_by_user.avatar_small]


Edit:
Wait haha. Nevermind, that's the creator of the thread, not the last poster. Sorry.


Edit 2:
This one works, for definite

$[board.last_thread.last_post.created_by_user.avatar_small]

To resize the avatar, use:
.boards .avatar_size_small {height: 25px; width: 25px;}
.boards .avatar_size_small > img {max-height: 25px; width: 25px;}



Edit 3:
Just to show you how to quickly, and easily add this to the default layout.
Admin > Themes > Layout Templates > Board > Board List

Make a new line on line 8, and add this:
<th class="icon">Avatar</th>

So you should now see:
<tr>
<th class="icon"></th>
<th class="main">Board</th>
<th class="threads">Threads</th>
<th class="posts">Posts</th>
<th class="icon">Avatar</th>
<th class="latest last">Last Post</th>
</tr>


Now go down and add a new line on line 36 and add:
<td class="icon">$[board.last_thread.last_post.created_by_user.avatar_small]</td>

So it looks like:
<td class="threads">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
<td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
<td class="icon">$[board.last_thread.last_post.created_by_user.avatar_small]</td>
<td class="latest last">


Click save, and voila.
(add in that CSS I gave too, and resize to any size you want)

[M³]

Stinky666 Love it! Got it to work, perfectly!  Would it be possible to have the same thing done on the thread page?  ... Man I LOVE THIS!!!

[Stinky666]

Apr 23, 2013 16:30:25 GMT -8 M³ said:

Stinky666 Love it! Got it to work, perfectly!  Would it be possible to have the same thing done on the thread page?  ... Man I LOVE THIS!!!

Indeed it can. I've been using a thread list one for a while now (since doing my "something something something dark theme" theme).
Just use this CSS:

.threads .avatar_size_small {height: 25px; width: 25px;}
.threads .avatar_size_small > img {max-height: 25px; width: 25px;}

And this in your layout templates > board > thread list:
$[thread.created_by_user.avatar_small]


If you want it in the latest post section again...
In the thread list tab, add a new line on line 20, adding this:
<td class="icon">$[thread.created_by_user.avatar_small]</td>

It should look like this:
<td class="created-by clickable">$[thread.created_by_user]</td>
<td class="replies clickable">$[thread.replies]</td>
<td class="views">$[thread.views]</td>
<td class="icon">$[thread.created_by_user.avatar_small]</td>
<td class="latest last">by $[thread.last_post.created_by_user]<br />$[thread.last_post.date]</td>


Now on the BOARD tab, add a new line at line 35:
<th class="icon">Avatar</th>

So it looks like this:
<th class="icon"><span class="aria-hidden">Status</span> </th>
<th class="checkbox"> </th>
<th class="main">Subject</th>
<th class="created-by">Created By</th>
<th class="replies">Replies</th>
<th class="views">Views</th>
<th class="icon">Avatar</th>
<th class="latest last">Last Post</th>

[M³]

Stinky666

2 Questions if I may -- ...1) Where in the thread list ... does this go: $[thread.created_by_user.avatar_small]

2) The image question

[Stinky666]

M³, yeah..


Now on the BOARD tab, add a new line at line 35:
<th class="icon">Avatar</th>


Edit:
Even though it should, if that doesn't fix it, go to your Style Sheet, and on roughly line 870 you should see widths to edit for subject, last post, views and replies. Adjust your subject to be bigger, and it should automatically resize. OR change the width of Last Post. Have a play with both I guess, see which you prefer and at what size.

This is what you should see:
.threads .main { width: 41%; text-align: @thread_align_subject; }
.threads .created-by { width: 14%; text-align: @thread_align_created_by; }
.threads .replies { width: 9%; text-align: @thread_align_replies; }
.threads .views { width: 8%; text-align: @thread_align_views; }
.threads .latest { width: 20%; text-align: @thread_align_last_post; }

[M³]

Perfect! I'll give it a go. Thanks, S!

[Stinky666]

Let me know how it goes, if you get it working or need further help =)

[M³]

I'm working with this on a temporary template, and do believe I have it working correctly! Thanks for ALL YOUR HELP, Stinky666. PBS, is and has ALWAYS BEEN the most helpful, and above all, patient! Thanks!  

[Stinky666]

Apr 24, 2013 10:51:40 GMT -8 M³ said:

I'm working with this on a temporary template, and do believe I have it working correctly! Thanks for ALL YOUR HELP, Stinky666. PBS, is and has ALWAYS BEEN the most helpful, and above all, patient! Thanks!  

No probs. Anything else, regarding this or whatever, of course just ask.