MyBB Community Forums

Full Version: [tutorial] Limit image size in your avatar gallery
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'm surprised that MyBB doesn't already do this but you might have noticed that the avatars in your avatar gallery are shown at full size, not the board avatar size. I came up with a solution for this in a support thread and its pretty straight forward so I thought it would be a useful tutorial.

Simply go ACP > Templates & Styles > Templates > Select template > User Control Panel Templates > usercp_avatar_gallery_avatar and replace:
<img src="{$avatarpath}" alt="{$avatar}" title="{$avatar}" />
with:
<img src="{$avatarpath}" width="yourwidth" alt="{$avatar}" title="{$avatar}" />

Enter your avatar width where it says yourwidth, usually this is simply 100px so you would just enter 100 there.

Here are some other places where this is also an issue:

In User Control Panel Templates > usercp_avatar_current template change:
<img src="{$urltoavatar}" alt="{$lang->avatar}" title="{$lang->avatar}" {$avatar_width_height} />
to
<img src="{$urltoavatar}" alt="{$lang->avatar}" width="yourwidth" title="{$lang->avatar}" />

In User Control Panel Templates > usercp_avatar_current template change:
<img src="{$urltoavatar}" alt="{$lang->avatar}" title="{$lang->avatar}" {$avatar_width_height} />
to
<img src="{$urltoavatar}" width="yourwidth" alt="{$lang->avatar}" title="{$lang->avatar}" />
Thanks again. Another question: how about resizing to your size only if the avatar is larger than a certain size?
Instead of width="100" put style="max-width: 100px;" should work.
Thanks. Last question so another won't have to ask: how would you set it so that the avatar is resized if either the height or with exceeds a limit? Example, if I have a 100px limit for the height, but the avatar uploaded has a 100px height and a 1000px width, how should I code it so the avatar is proportionately resized?
ACP > Configuration > User Registration and Profile Options > Avatar Resizing Mode