How to Make Avatars Bigger in Activity Stream

[Daniel]

Hey y'all,

I'd like to make the avatars in the Activity Stream larger - they seem to max out at 60px. Been looking for the css class avatar in the code but haven't had luck - I figure that's where the loot is.

Any help/guidance/pointers are GREATLY appreciated. Much thanks!

[Max Taxable]

Class "thumbnail?"

[Daniel]

Wasn't able to find that class...

Here's the code from the activitystream_calendar_event template (the other templates forum, blog post, album have the same)
<vb:if condition="$userinfo['showavatar']">
<div class="avatar">
<img src="{vb:raw userinfo.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw userinfo.username}}" />
</div>
</vb:if>

--

Also tried to force the change by adding this rule into activitystream.css
.avatar {
width: 174px !imporant;
height: 172px !important;
}
This seemed to make a change in the spacing, but the images themselves, surprisingly remained small. I wonder if it's being reduced by the system somehow.

[ozzy47]

I took a look into this, and short of editing the templates, I don't see how it is possible. :(

[Max Taxable]

So, the code that does this goes:<img alt="Your Avatar" src="image.php?u=8&dateline=1405267152&type=thumb" title="Your Avatar">

"type=thumb" intrigues me. Is this a call to a CSS definition?

[Max Taxable]

Also, lookie here in the CSS template for activity stream. (activitystream.css)}

li.activitybit .avatar {
float:{vb:stylevar left};
padding-{vb:stylevar right}:{vb:stylevar padding};
width: 75px;
}It almost appears we are defining avatar size right there. And can change that definition and put in height as well as width.

[ozzy47]

Yeah, but that does not control it, I took that out and used my own definitions, but they do not work. I would be willing to bet, it is set in the PHP files somewhere.

[Max Taxable]

Why would it define it, but that definition isn't relevant? I tried changing it too, no joy.

Weird. What if we put '!important' there?

[ozzy47]

Nope, it don't work. You think I did not try everything I know already. :p

[Max Taxable]

activitystream_forum_post

template appears to have this.


Nope, it don't work. You think I did not try everything I know already.Yeah haha.

[ozzy47]

Right, the activity stream templates is what you would have to edit in order to change the size, and there is quite a few of them to change.

If you look in your customavatar table, you will see that the height is set to 60

This is controlled by the class_core.php file when you load a avatar to the site.

So in order to change this, without doing a query, and a file edit, is to edit each template for the activity stream, and find something like this.

<img src="{vb:raw userinfo.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw userinfo.username}}" />

And change it to this.

<img width="100px" height="100px" src="{vb:raw userinfo.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw userinfo.username}}" />

Of course changing 100px to your liking.

[Max Taxable]

Yikes.

[ozzy47]

Like I said, I looked into this, and that is why I posted this. :)

I took a look into this, and short of editing the templates, I don't see how it is possible. :(

[Lynne]

li.activitybit .avatar img {width: 100px;}

However, you probably then need to change other html to accommodate the new size of the avatar.

[Max Taxable]

Yeah I already went there Lynne haha.

This size is defined when avatars are uploaded. They saved themselves alot of coding to scale images doing it this way, but makes it a real pain in the butt to customize to your liking.

[ozzy47]

Well son of a gun, I could have sworn I tried that before, but I guess not.

But, you will also have to adjust the width in this css to acomodate the increased size.

li.activitybit .avatar {
float: left;
padding-right: 10px;
width: 75px;


}

[ozzy47]

So to sum it all up, add this to your additional.css

/* Start Resize Avatar In Activity Stream */
li.activitybit .avatar img {
width: 100px;
}

li.activitybit .avatar {
width: 115px;
}

li.activitybit .fulllink {
margin-left: 40px;
}
/* End Resize Avatar In Activity Stream */Change 100px to the desired size you want the avatars, and change 115px; to be 15px more that your avatar size.

This will make the avatars 100px high by 100px wide, and take care of the display issues with text overlapping the avatar.

Now should you want the avatar height different from the width, change the first bit of CSS to this.

li.activitybit .avatar img {
width: 100px;
height: 60px;
}Of course set your dimensions to your liking.

[Daniel]

Much thanks to *all* of you for your help on this.

Strangely, the enlarged avatar comes out blurry (the avatar height and width in the usergroup settings + the css above are identical).

This makes me think that the 60x60px version is still being pulled instead of the actual avatar itself. Any thoughts on this?

[ozzy47]

Yes, the actual thumb is being used, and resized. There is no other way around this without, a file edit, then having all users reupload their avatars. And quite possibly some more changes.

IMO the best bet it to leave well enough alone, to much trouble, just to make avatars bigger, which really is not going to have any benefit to the site. :)

[Max Taxable]

Strangely, the enlarged avatar comes out blurry (the avatar height and width in the usergroup settings + the css above are identical).

This makes me think that the 60x60px version is still being pulled instead of the actual avatar itself. Any thoughts on this?Yep any time you are using script to scale images up, this happens.

[ozzy47]

Yep, this is true, you can resize them slightly, but if you do it to much, it becomes blurry and pixelated.

[Max Taxable]

It's okay to scale them DOWN though. haha!

[Daniel]

It's okay to scale them DOWN though. haha!
Haha! Indeed!

Welp, thanks again y'all, if anyone does know how to do this (even if it takes a file edit and people re-uploading their avatars), I'm totally cool with knowing how to do it. I'm trying to emphasize faces to posts on the forum I'm working on. Cheers!

[ozzy47]

You need to change the values set in class_core.php

/**#@+
* The maximum sizes for the "small" profile avatars
*/
define('FIXED_SIZE_AVATAR_WIDTH', 60);
define('FIXED_SIZE_AVATAR_HEIGHT', 80);
/**#@-*/

Then have all your users re add their avatars, and I think that will work. You can test it out on your own user to see if it does.

[Lynne]

If you change that setting, you may be able to just go to Maintenance > General Update Tools > Rebuild Custom Avatar Thumbnails

[ozzy47]

Possibly Lynne, not sure though, as I have never tried to resize the thumbs this way.

[Daniel]

Great success! Clear avatars on the activity stream!

Here's the things that worked:

So to sum it all up, add this to your additional.css

/* Start Resize Avatar In Activity Stream */
li.activitybit .avatar img {
width: 100px;
}

li.activitybit .avatar {
width: 115px;
}

li.activitybit .fulllink {
margin-left: 40px;
}
/* End Resize Avatar In Activity Stream */Change 100px to the desired size you want the avatars, and change 115px; to be 15px more that your avatar size.

This will make the avatars 100px high by 100px wide, and take care of the display issues with text overlapping the avatar.

Now should you want the avatar height different from the width, change the first bit of CSS to this.

li.activitybit .avatar img {
width: 100px;
height: 60px;
}Of course set your dimensions to your liking.

You need to change the values set in class_core.php

/**#@+
* The maximum sizes for the "small" profile avatars
*/
define('FIXED_SIZE_AVATAR_WIDTH', 60);
define('FIXED_SIZE_AVATAR_HEIGHT', 80);
/**#@-*/Then have all your users re add their avatars, and I think that will work. You can test it out on your own user to see if it does.

I was not able to test out this suggestion as my administrator avatars were set to 80x80 :rolleyes:
If you change that setting, you may be able to just go to Maintenance > General Update Tools > Rebuild Custom Avatar Thumbnails

[ozzy47]

Hopefully it will work when new users load a avatar as well. :)