Adding an Avatar Hyperlink

[Riley]

Avatars have always jacked me up; I never know how to go about them when they're not in the profile or mini-profile. Just can't tame them.

Here is what I'm trying to code. (Top for guests, bottom alternative for members logged in.)

I've done the guest code well enough with an if/else, but I'm getting stumped on how to go about the member avatar.

Here's how being logged in appears (excuse the different text, I'm still figuring out the ~ vibe ~). However, the avatar only appears when I'm on the profile tab instead of on every page like I need it to be as it's included in the site header.

Here is the  code from my forum layout that involves this section.

{if !$[current_user.is_member]}
<!-- IF NOT LOGGED IN -->
                       <table><tbody><tr>
                           <td><div class="login-area">
{if $[login_link] || $[register_link]}
$[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link]
                               {/if}</div></td><td><div class="login-default-av">?</div></td>
                           </tr></tbody></table>
                       
{else}
                       
                       <!-- IF LOGGED IN -->
                            <table><tbody><tr>
                           <td><div class="login-area">
                               be kind, warrior.<br>$[logout_link]</div></td>
                                <td><div class="login-member-av">$[user.avatar]</div></td>
                           </tr></tbody></table>
                        {/if}

The only property in my login-member-av class is max-width:50% in my failed attempt to try to scale the avatar down. I'll be making the avatar a hyperlink when the issue is sorted because that's one thing I can do for an avatar easily enough.

If I could get a point in the right direction, that would be fantastic! Many thanks in advance!

[Riley]

Little bump!

[Kami]

so i can address both issues here:

1. the avatar won't scale down because $[avatar] and all avatar-generating variables actually generate a div containing an image, instead of just pure image tag / image path. you'll need to right click > inspect to find out what classes the parent container holds (because you've changed your theme from default) and then drill down to specifically target the image with the syntax .classname img { properties here }

** note: i can't remember if the parent container resizes with the image, but in case it doesn't you can specify the size as well (the container is likely smaller with your current CSS change but as that's not impacting the image it's likely breaking out of those bounds).

2. that variable should be $[current_user.avatar] not user.avatar! it's not appearing until viewing the profile page because you don't specify a user anywhere else and "user" always refers to a specifically identified user as opposed to the *current* user.