1. 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

Discussion in 'Styling and Customization Questions' started by J2A, May 25, 2011.

  1. J2A

    J2A Member

    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)
     
  2. Russ

    Russ Well-Known Member

    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 :)
     
  3. Mike

    Mike XenForo Developer Staff Member

    That would require a modification, as we don't expose the required information to know the user's avatar URL.
     
  4. J2A

    J2A Member

    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

    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>
     
  5. James

    James Well-Known Member

    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. J2A

    J2A Member

    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" />
     
  7. Mike

    Mike XenForo Developer Staff Member

    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.
     
  8. Luke B

    Luke B Active Member

    This would be awesome if we could get this to work! This is exactly what I wanted.
     
  9. Veer

    Veer Well-Known Member

    Yes I also would love to use this if possible.
     
  10. James

    James Well-Known Member

    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?
     
  11. Luke B

    Luke B Active Member

    @J2A did the suggestion James made help out at all? I'm pretty new at this so I'm not sure how to go about it.
     
  12. James

    James Well-Known Member

    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.
     
  13. Luke B

    Luke B Active Member

    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
     
  14. James

    James Well-Known Member

    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
     
  15. Luke B

    Luke B Active Member

    Okay great. Where would I place this information?
     
  16. James

    James Well-Known Member

    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 likes this.
  17. Luke B

    Luke B Active Member

    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 likes this.
  18. Andy.N

    Andy.N Well-Known Member

    Watching in anticipation. This may turn out great.
     
  19. James

    James Well-Known Member

    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:
    [​IMG]

    ...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 />
    
     
    dwdmadmac, Veer, A.E. and 1 other person like this.
  20. Luke B

    Luke B Active Member

    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?

    Where do I do this?

    James, your awesome man!
     

Share This Page