How to Make Avatars Bigger in Activity Stream

[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.

Originally Posted by ozzy47

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]

Originally Posted by Daniel

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.