• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Adding User Avatars to lastpost Node

#1
Just having some difficulty tweaking this template and understanding how the User avatar system works

Code:
<xen:avatar user="$forum.lastPost"  img="true" />
I've noticed the size property is used here, but all the sizes are unsuitable for what i require and also with this code it links to the correct profile but the (just shows the default avatar) actual avatar of the user does not display?

Any suggestions how to get this work correctly? Heres what i want it to look like: http://dribbble.com/shots/166859-Forum

Any help would be appreciated! (This should be in the questions section)
 

Russ

Well-known member
#2
Should be in support as this section is used for released template modifications.

I'm not sure if it would work or be the best method but you could do something like

.lastpost .img { max-height: 15px !important; max-width: 15px !important;}

.lastpost being the section it's in.

I could be totally wrong heh :)
 

Mike

XenForo developer
Staff member
#3
That would require a modification, as we don't expose the required information to know the user's avatar URL.
 
#4
I mean their avatar doesnt display on the xenforo system. It links to their profile correctly but does not display their avatar, if that makes sense it simply shows the default gravatar.

It looks like this currently: http://d.pr/wCSO

That would require a modification, as we don't expose the required information to know the user's avatar URL.
Code:
<div class="nodeLastPost secondaryContent"><p class="Thread_icon">Latest Thread</p>
            <xen:if is="{$forum.lastPost.date}">

                <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">
{xen:helper wordTrim, $forum.lastPost.title, 30}</a>

                <span class="lastThreadMeta">{xen:phrase by}
<div class="lastPostAvatar"><xen:avatar user="$forum.lastPost"  img="true" /></div>
<xen:username user="$forum.lastPost" />, <xen:datetime time="$forum.lastPost.date" class="muted" /></span>
            <xen:else />
                <span class="noMessages muted">({xen:phrase contains_no_messages})</span>
            </xen:if>
        </div>
 

James

Well-known member
#5
I think what Mike is saying is that the Avatar URL isn't stored in the $forum.lastPost info, so you can't use that info to grab the user's avatar.
 
#6
I think what Mike is saying is that the Avatar URL isn't stored in the $forum.lastPost info, so you can't use that info to grab the user's avatar.
How would we go about adding the Latest Posters avatar to the Node info? Any ideas @Mike ? I did try £forum.lastPostinfo which did come up with the correct link to the last posting user, but not the image.

<xen:avatar user="$user" size="s" img="true" class="_plainImage" />
 

Mike

XenForo developer
Staff member
#7
As I said, you'd have to modify the code to expose more information about the last post user to get the avatar. It's not possible simply via the templates.
 

James

Well-known member
#10
I suppose you may be able to create it using just the user ID... try this:
Code:
<img src="{xen:link data/avatars/s/0/{$forum.lastPost.user_id}.jpg}" />
Completely untested, that might be the wrong variable too. But give it a shot. Out of curiosity, which template are you using? node_forum_level_2, thread_list_item, etc?
 

James

Well-known member
#12
The suggestion I posted won't work standalone. I've just realised how avatars are stored.
Avatars for userID 1-999: /data/avatars/s/0/userID.jpg?timestamp
Avatars for userID 1000-1999: /data/avatars/s/1/userID.jpg?timestamp
Avatars for userID 2000-2999: /data/avatars/s/2/userID.jpg?timestamp

They are grouped in thousands and this makes it more difficult. Of course, you could use more template statements (perhaps even a xen:snippet), but it just becomes more hassle than it's worth.
 

Luke B

Active member
#13
The suggestion I posted won't work standalone. I've just realised how avatars are stored.
Avatars for userID 1-999: /data/avatars/s/0/userID.jpg?timestamp
Avatars for userID 1000-1999: /data/avatars/s/1/userID.jpg?timestamp
Avatars for userID 2000-2999: /data/avatars/s/2/userID.jpg?timestamp

They are grouped in thousands and this makes it more difficult. Of course, you could use more template statements (perhaps even a xen:snippet), but it just becomes more hassle than it's worth.
I would like to revisit this. How do I go about making this happen using what you have suggested? Is there anything else that can be done? Below is what I would like it to look like.
last_post_icon_r2_c2.jpg

Thank you very much
 

James

Well-known member
#14
You'd have to use a couple of conditionals to see which group the user ID belongs to.
If user ID < 1000, group 0
If user ID 1000-1999, group 1
If user ID 2000-2999, group 2
etc
 

James

Well-known member
#16
You'll have to look for the last post info in the thread_view template. I've not had time to look at actual implementation but trial and error should work fine.
 

Luke B

Active member
#17
Code:
.node .nodeLastPost
{
    @property "secondaryContent";
    background-color: rgb(247, 247, 247);
    padding: 10px 10px 4px;
    @property "/secondaryContent";;

    @property "nodeLastPost";
    font-size: 11px;
    background-color: rgb(247, 247, 247);
    padding: 5px 10px 0px;
    margin: 9px 0px 10px 10px;
    border-left: 4px double rgb(201, 201, 201);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 14px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 210px;
    height: 34px;
    @property "/nodeLastPost";
}
James, your the man! For the styling I would be modifying this in the node_list.css correct? Or do I create something new directly above it? If so, what would be the appropriate CSS to achieve the look I'm going for below? The avatar is 32x32. I'm probably way off base but...

last_post_icon_r2_c2.jpg
 

Andy.N

Well-known member
#18
James, your the man! For the styling I would be modifying this in the node_list.css correct? Or do I create something new directly above it? If so, what would be the appropriate CSS to achieve the look I'm going for below? The avatar is 32x32. I'm probably way off base but...

View attachment 16653
Watching in anticipation. This may turn out great.
 

James

Well-known member
#19
Code:
.node .nodeLastPost
{
    @property "secondaryContent";
    background-color: rgb(247, 247, 247);
    padding: 10px 10px 4px;
    @property "/secondaryContent";;

    @property "nodeLastPost";
    font-size: 11px;
    background-color: rgb(247, 247, 247);
    padding: 5px 10px 0px;
    margin: 9px 0px 10px 10px;
    border-left: 4px double rgb(201, 201, 201);
    position: absolute;
    top: 0;
    right: 0;
    line-height: 14px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 210px;
    height: 34px;
    @property "/nodeLastPost";
}
James, your the man! For the styling I would be modifying this in the node_list.css correct? Or do I create something new directly above it? If so, what would be the appropriate CSS to achieve the look I'm going for below? The avatar is 32x32. I'm probably way off base but...

View attachment 16653
I think you should be modifying the template thread_list_item. I'll take a look.

Okay yeah I was right. I've got the XenForo syntax sorted, all you need to do now is edit the CSS to resize the image. Steps:
Open thread_list_info
Find:
Code:
<dl class="lastPostInfo">
<dt><xen:username user="$thread.lastPostInfo" /></dt>
<dd class="muted"><a{xen:if '{$visitor.user_id}', ' href="{xen:link posts, $thread.lastPostInfo}" title="{xen:phrase go_to_last_message}"'} class="dateTime"><xen:datetime time="$thread.lastPostInfo.post_date" /></a></dd>
</dl>
Replace:
Code:
<dl class="lastPostInfo">
<xen:set var="$avatarGroup">{xen:if '{$thread.lastPostInfo.user_id} < 1000', '0', '{xen:helper snippet, $thread.lastPostInfo.user_id, 1}'}</xen:set>
<img src="data/avatars/s/{$avatarGroup}/{$thread.lastPostInfo.user_id}.jpg" alt="{$thread.lastPostInfo.username}" />
<dt><xen:username user="$thread.lastPostInfo" /></dt>
<dd class="muted"><a{xen:if '{$visitor.user_id}', ' href="{xen:link posts, $thread.lastPostInfo}" title="{xen:phrase go_to_last_message}"'} class="dateTime"><xen:datetime time="$thread.lastPostInfo.post_date" /></a></dd>
</dl>
All you need to do now is add the CSS syntax. Here is what I've got so far:


...and after all that I realise you're after the forum last post. I'll get onto that.
------------------------------------------------------------------------------------------------------
For forum last post info:
Open up node_forum_level_2
Find:
Code:
<xen:if is="{$forum.lastPost.date}">
{xen:phrase latest}: <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{xen:helper wordTrim, $forum.lastPost.title, 30}</a>
<span class="lastThreadMeta"><xen:username user="$forum.lastPost" />, <xen:datetime time="$forum.lastPost.date" class="muted" /></span>
<xen:else />
Replace:
Code:
<xen:if is="{$forum.lastPost.date}">
<xen:set var="$avatarGroup">{xen:if '{$forum.lastPost.user_id} < 1000', '0', '{xen:helper snippet, $forum.lastPost.user_id, 1}'}</xen:set>
<img src="data/avatars/s/{$avatarGroup}/{$forum.lastPost.user_id}.jpg?{$forum.lastPost.date}" alt="{$forum.lastPost.username}" />
{xen:phrase latest}: <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{xen:helper wordTrim, $forum.lastPost.title, 30}</a>
<span class="lastThreadMeta"><xen:username user="$forum.lastPost" />, <xen:datetime time="$forum.lastPost.date" class="muted" /></span>
<xen:else />
 

Luke B

Active member
#20
Okay, its pulling the images now and that is awesome! But I've lost the last post data as it was before (example image above). How would I get this back?

All you need to do now is add the CSS syntax
Where do I do this?

James, your awesome man!