Avatar anywhere?

[cerasri]

Alrighty, I'm trying to do something similar to the Avatar Anywhere code but basically I want to show a member's avatar in the banner area (will be in a nested div). I tried using $[avatar] however that only seems to work whenever I view it from the profile page. If someone could help me with this, I'd greatly appreciate it.

Thanks in advance~

[Shrike]

Hi,

For the banner area, I'm assuming you're doing this in the Forum Wrapper template, in which case you have 3 options. These show the avatar at 150px/75px/50px respectively (or whatever you've set the default/medium/small sizes to):

$[current_user.avatar]
$[current_user.avatar_medium]
$[current_user.avatar_small]

[cerasri]

Awesome--it worked like a charm!!

Thank you so much!

[Stinky666]

Apr 12, 2013 17:07:27 GMT -8 Shrike said:

Hi,

For the banner area, I'm assuming you're doing this in the Forum Wrapper template, in which case you have 3 options. These show the avatar at 150px/100px/50px respectively (or whatever you've set the default/medium/small sizes to):

$[current_user.avatar]
$[current_user.avatar_medium]
$[current_user.avatar_small]

I've been using the _small one for ages (my something something something dark theme), but is there a way to easily resize the avatar? Not sure what size the _small is, about 50px though I think. Anyway to give it a specific size (smaller) or perhaps percentage? Half the size or 30px for example would be brilliant.

[Shrike]

Apr 13, 2013 6:33:58 GMT -8 Stinky666 said:

Apr 12, 2013 17:07:27 GMT -8 Shrike said:

Hi,

For the banner area, I'm assuming you're doing this in the Forum Wrapper template, in which case you have 3 options. These show the avatar at 150px/100px/50px respectively (or whatever you've set the default/medium/small sizes to):

$[current_user.avatar]
$[current_user.avatar_medium]
$[current_user.avatar_small]

I've been using the _small one for ages (my something something something dark theme), but is there a way to easily resize the avatar? Not sure what size the _small is, about 50px though I think. Anyway to give it a specific size (smaller) or perhaps percentage? Half the size or 30px for example would be brilliant.

It depends, is it everywhere you want to resize it or just a specific place?

If it is in a specific place (like a banner remodel or something) where you know what the surrounding elements are, you could do something like this:

header .avatar_size_small {height: 40px; width: 40px;}
header .avatar_size_small > img {max-height: 40px; width: 40px;}

As for generally resizing the avatar, this depends on which of the three sizes you're changing. Default is used in the mini-profile (with posts etc), small is used in the "micro-profiles" which show in things like the user search box, and medium is used for avatars elsewhere (such as the ones shown when you go to your profile). The actual CSS that controls the size of the avatar is the same as above, but you'll often need to change the size of things around it to accommodate.

[Stinky666]

Apr 13, 2013 6:58:04 GMT -8 Shrike said:

Apr 13, 2013 6:33:58 GMT -8 Stinky666 said:

I've been using the _small one for ages (my something something something dark theme), but is there a way to easily resize the avatar? Not sure what size the _small is, about 50px though I think. Anyway to give it a specific size (smaller) or perhaps percentage? Half the size or 30px for example would be brilliant.

It depends, is it everywhere you want to resize it or just a specific place?

If it is in a specific place (like a banner remodel or something) where you know what the surrounding elements are, you could do something like this:

header .avatar_size_small {height: 40px; width: 40px;}
header .avatar_size_small > img {max-height: 40px; width: 40px;}

As for generally resizing the avatar, this depends on which of the three sizes you're changing. Default is used in the mini-profile (with posts etc), small is used in the "micro-profiles" which show in things like the user search box, and medium is used for avatars elsewhere (such as the ones shown when you go to your profile). The actual CSS that controls the size of the avatar is the same as above, but you'll often need to change the size of things around it to accommodate.

If it helps, it's on the thread list page, which is currently set up like so:

<td class="created-by" style="background-color: #111111;">$[thread.created_by_user.avatar_small]</td>
<td {if $[thread.is_new]} id="newposts2"{else} id="newposts"{/if}>


Is there a way to add to the style in the td, to resize, or would it have to be done in the CSS?

[Shrike]

Apr 13, 2013 7:28:26 GMT -8 Stinky666 said:

Apr 13, 2013 6:58:04 GMT -8 Shrike said:

It depends, is it everywhere you want to resize it or just a specific place?

If it is in a specific place (like a banner remodel or something) where you know what the surrounding elements are, you could do something like this:

header .avatar_size_small {height: 40px; width: 40px;}
header .avatar_size_small > img {max-height: 40px; width: 40px;}

As for generally resizing the avatar, this depends on which of the three sizes you're changing. Default is used in the mini-profile (with posts etc), small is used in the "micro-profiles" which show in things like the user search box, and medium is used for avatars elsewhere (such as the ones shown when you go to your profile). The actual CSS that controls the size of the avatar is the same as above, but you'll often need to change the size of things around it to accommodate.

If it helps, it's on the thread list page, which is currently set up like so:

<td class="created-by" style="background-color: #111111;">$[thread.created_by_user.avatar_small]</td>
<td {if $[thread.is_new]} id="newposts2"{else} id="newposts"{/if}>


Is there a way to add to the style in the td, to resize, or would it have to be done in the CSS?

You'd have to do it in the CSS. It should be a simple case of using the CSS I posted above but with .created-by instead of header at the start.

[Stinky666]

Apr 13, 2013 7:32:27 GMT -8 Shrike said:

Apr 13, 2013 7:28:26 GMT -8 Stinky666 said:

If it helps, it's on the thread list page, which is currently set up like so:

<td class="created-by" style="background-color: #111111;">$[thread.created_by_user.avatar_small]</td>
<td {if $[thread.is_new]} id="newposts2"{else} id="newposts"{/if}>


Is there a way to add to the style in the td, to resize, or would it have to be done in the CSS?

You'd have to do it in the CSS. It should be a simple case of using the CSS I posted above but with .created-by instead of header at the start.

Excellent, thanks