• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Animated Avatars in threads

Junior

Well-known member
This is a simple template edit that allows animated avatars to show in posts. You have two options here:

1. Forces the size of all avatars to be 96x96
2. Allow avatars to use their aspect ration.

Also there is 2 versions, one that displays the animation to everyone and the other codes won't show animation to guests for faster browsing. :)

Guest will see animation


Forced 96x96 edit: Open template message_user_info

Find
Code:
<xen:avatar user="$user" size="m" />

Replace with
Code:
<a class="username avatar Av{$user.user_id}l" href="{xen:link members, $user}">
<img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" height="96px" width="96px" itemprop="photo" />
</a>

Aspect ration edit: Open template message_user_info

Find
Code:
<xen:avatar user="$user" size="m" />

Replace with
Code:
<a class="username avatar Av{$user.user_id}l" href="{xen:link members, $user}">
<img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="max-height:96px;max-width:96px;" itemprop="photo" />
</a>

If guest; do not display animation

Forced 96x96 edit: Open template message_user_info

Find
Code:
<xen:avatar user="$user" size="m" />

Replace with
Code:
<xen:if is="!{$visitor.user_id}">
<xen:avatar user="$user" size="m" />
<xen:else />
<a class="username avatar Av{$user.user_id}l" href="{xen:link members, $user}">
<img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" height="96px" width="96px" itemprop="photo" />
</a></xen:if>

Aspect ration edit: Open template message_user_info

Find
Code:
<xen:avatar user="$user" size="m" />

Replace with
Code:
<xen:if is="!{$visitor.user_id}">
<xen:avatar user="$user" size="m" />
<xen:else />
<a class="username avatar Av{$user.user_id}l" href="{xen:link members, $user}">
<img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="max-height:96px;max-width:96px;" itemprop="photo" />
</a></xen:if>

Demo
 
Well done Junior.

What is the reason to link avatars to {xen:link account/avatar} so there's no member card, I like to view member card instead.
 
That was a mistake ^ ^ You'll notice the 'edits'. I've corrected this to a point. It now redirects to a members profile but I have not found how the profile card works. Let me look into it a little more and I'll have the edit up.

Please update to the newer code in the mean time. :)

Edit: Updated added username to the class in the url. Remove this if you do not want the profile card popping up and you just want a direct link to the profile page.
 
very nice! I will add this to my site when Junior has completed the code.

For those wanting a direct link to a thread where you can view the animation working:
http://xfproud.com/support/threads/t-animated-avatars-in-threads.8/

As of right now it is complete unless you have some ideas for expanding it. I'm thinking of having it manage guest to see the gif avatars without animation to ensure a faster browing experience. If you want to wait for that, it'll be up tonight.

Of course the regular code will still be available as well.
 
This edit does not effect the membercard.
It seems to affect it on your site. The normal member card avatar takes up the full square block. When I look at Sylwester's member card on your site, the avatar is substantially smaller then it should be. The normal member card avatar is 192 x 192 I believe.

Click on your avatar on your site and look at your member card, then check Sylwester's avatar and check his member card. His image is much smaller.
 
It seems to affect it on your site. The normal member card avatar takes up the full square block. When I look at Sylwester's member card on your site, the avatar is substantially smaller then it should be. The normal member card avatar is 192 x 192 I believe.

Click on your avatar on your site and look at your member card, then check Sylwester's avatar and check his member card. His image is much smaller.

It's just coincidental the avatar is the same size as in posts.
http://xfproud.com/support/members/sylwester.5/

You're welcome to test it with a larger animated avatar. Just note xenforo kills animation for any avatar for an image larger than 196x196 (I believe).

http://online-image-editor.com
This is a good site for resizing gif images.
 
Perhaps I am misunderstanding. I thought that XF handles all the image re-sizing automatically.

I uploaded one avatar to this site. That same avatar appears in various sizes throughout the forums. On your site Sylwester's avatar doesn't resize to fill the member card as it would normally, right?
 
Perhaps I am misunderstanding. I thought that XF handles all the image re-sizing automatically.

I uploaded one avatar to this site. That same avatar appears in various sizes throughout the forums. On your site Sylwester's avatar doesn't resize to fill the member card as it would normally, right?

The resizing only takes place where and when needed. Such as forum posts. It seems they are being forced to 96x96 and also forced into JPG. It even converts a 96x96 oddly enough. Chat about it here:
http://xenforo.com/community/threads/gif-avatars-converted-to-jpg-for-posts.14804/

Member profile cards and user profiles don't seem to be resized or converted into anything so long as they have a width smaller than 192px.

You can note the creator of this threads avatar:
http://xenforo.com/community/threads/fake-vbulletin-testimonials.14825/

It does not fill the member card when clicked. It remains its size.

Hope that gives you a little more insight! :)
 
Top Bottom