How to get a user's avatar link?

[anaix3l]

In the Loops and Variables panel, I can only find $[user.avatar], but not something like $[user.avatar.href]:


$[user.avatar] inserts:

<div class="avatar-wrapper avatar_size_default avatar-$[user.id]" title="$[user.name]">
 <img src="$[user.avatar.href]" alt="$[user.name] Avatar">
</div>
I'd like to be able to change this. That is, add another class to the div to make styling easier and more consistent across the whole forum (there are multiple things I'd like to style the same or at least very similarly and I'd like to avoid writing the exact same set of styles multiple times or having a too long list of selectors).

In other instances where I wanted to do something similar, I took the generated HTML, inserted the necessary variables where needed and added the classes and attributes I wanted to add. But here there's no $[user.avatar.href].

Is there any way to get it?

---

And yes, I know I can wrap it all in another div with the class I want, that's what I'm currently doing, but I'd like to avoid deep nested structures.

[Kami]

I could be wrong, but in all my years of templates I have been unable to find a way to do this either and have had to resort into deep nesting. Maybe Brian knows?

That said, I do believe you may be able to add a class via javascript, with the caveat that javascript loads after page content finishes loading so there may be a brief moment where things render incorrectly before the js "kicks in" so to speak. I am not well versed in js so maybe Lynx or Chris would know?

[Brian]

Feb 1, 2023 7:24:59 GMT -8 Kami said:

I could be wrong, but in all my years of templates I have been unable to find a way to do this either and have had to resort into deep nesting. Maybe Brian knows?

There doesn't appear to be an avatar direct link variable at this time.

[Lynx]

Feb 1, 2023 7:24:59 GMT -8 Kami said:

I could be wrong, but in all my years of templates I have been unable to find a way to do this either and have had to resort into deep nesting. Maybe Brian knows?

That said, I do believe you may be able to add a class via javascript, with the caveat that javascript loads after page content finishes loading so there may be a brief moment where things render incorrectly before the js "kicks in" so to speak. I am not well versed in js so maybe Lynx or Chris would know?

I know I'm late to the party, but (if I recall correctly), JS does have .addClass() and .removeClass() that can be used to add class(es) or remove class(es) respectively.

[Chris]

Welcome back Lynx!

The CSSOM is built before javascript and is magnitudes faster than javascript, so I usually opt for the CSS solution over anything javascript. Since the OP mentioned a CSS solution already in place using ancestor elements, I considered this resolved.

[Lynx]

Mar 12, 2023 9:04:52 GMT -8 Chris said:

Welcome back Lynx!

The CSSOM is built before javascript and is magnitudes faster than javascript, so I usually opt for the CSS solution over anything javascript. Since the OP mentioned a CSS solution already in place using ancestor elements, I considered this resolved.

Thanks, Chris!

My thoughts when I posted that was to simply point out that there are other options, should the OP decide to try a different path - even if the option isn't as efficient. I probably should have just left it alone and not responded, given the time lapsed.