Avatar element

Hello,

I think most of you are familiar with the { USERNAME } element, I think it's an element but I will just call it that in this topic.
I was wondering if there is also a possiblity to do this with the avatar? I've seen it on other forums but I can't find the right element. I also don't know if it has to look something like: <img src="{USER_AVATAR}"> or something like that?

Hopefully someone can help me!

Greetings,
Hert

What are you trying to with the avatar element?

I actually want to recreate the login widget, so I can customize it (:
I've already found out how I can make a login one, but I don't know how to make a status one - since I don't have the avatar element sadly.

Hopefully this anwsers your question (:

Status and avatar are two completely different things.

Okay I decided to make some images, because appearently I can't explain things.

Normally you have this widget, the login widget, and when you login you get this status thing:

Spoiler:

Now what I want out of this widget is the element that is used for this, the avatar, so I can recreate it in my own widget and personalize it:

Spoiler:

I really don't know how to make it any clearer, really. So hopefully it's understandable now.

i think this is what your looking for

Code:

{L_AVATAR_IMG}

It isn't working, or I'm doing something wrong.
I've tried just putting it in the widget and in the code <img src="{L_AVATAR_IMG}"> but neither seem to work for some reason.

Hi @Hert

The one that you're looking for should be this : https://github.com/Etana/template/blob/master/var/USERNAME_AVATAR.md#readme

However, this variable is only applicable to the templates. ( Templates > Portal > mod_login, for example ) You can find a complete template variable list here, however note that the majority is in French.

If you want to achieve this outside the templates, I would recommend placing this where HTML ( and <script> ) formats. Such as a widget, HTML page, or homepage message.

Code:

<script type="text/javascript">document.write(_userdata.avatar)</script>

I thinking that working in the template is going to work better, but the problem I'm facing now is that nothing seems to work on the avatar. I want to change the size a bit, make it - for example - 50px by 50px. I've tried by adding a class to the div but it ignores it.
I've even tried putting in seperate hight and width properties and even with a style part in the div code, but it just ignores it completely.
I know it can be done, I've seen it on another forum. I've also tried using the script in my own widget - but that ignores it aswell.

The code I found in the template that I'm focusing on is this one:

Code:

<div style="float:{DIRECTION};">{USERNAME_AVATAR}</div>

I'm sorry if my explanation might seem a bit vague, but I'm not that good at it ^^'

Are you publishing the template after saving the changes?

Yes, I am.
I've worked enough with them to know that, I'm not such a big a noob.

Have you tried using the option in the avatar section to set the size?

That won't work. I've put it at 150x200 pixels, because I like that size on the normal forum etc.
But in the widget I just want it to be a little bit smaller because it looks too big otherwise.

It appeared to be working for me by making the addition. You added a class and then proceeded to make modifications via CSS, correct ? This is what I used and it worked correctly.

HTML :

Code:

<div class="faAvatar">{USERNAME_AVATAR}</div>

CSS :

Code:

.faAvatar img { width:50px }

The only other thing I can think of was were you changing the DIV's style via CSS instead of selecting IMG inside your container ?

I did it similiar to that, yes, but forgot the img part in the CSS code - so now it works!
Thank you!

I was, however, wondering if you could use the {USERNAME_AVATAR} as a background image or something, because the changing in width and height could result in making the avatar look stretched out etc.

Hert wrote:I did it similiar to that, yes, but forgot the img part in the CSS code - so now it works!
Thank you!

I was, however, wondering if you could use the {USERNAME_AVATAR} as a background image or something, because the changing in width and height could result in making the avatar look stretched out etc.

If you're adjusting both the height AND width, it will cause some deformation. I'd recommend only adjusting the width to the maximum value you want, since width normally induces horizontal overflow ( scrollbar ) which isn't a desirable result.

If you want to cut the image off, I'd recommend a setup similar to this ( uses the container class from my example ) :

Code:

.faAvatar {
  height:100px;
  width:100px;
  overflow:hidden; /* clips image */
}

Setting the overflow to hidden will effectively clip the image if it exceeds the specified width and height.

Well I tried it with only adjusting the width, but since most people just a 150x200 pixel avatar and I wanted to make a 100x100 one in the widget I couldn't just only adjust the width for the height would still be too long (:

But the clipping worked, thank you very much!

It's solved now ^^

You're welcome ^^

Topic archived

Have a nice week.