How to Change the Default BuddyPress Avatar Sizes

If you want to totally customize your BuddyPress community, at some point you’ll probably be interested in changing the default avatar sizes. BuddyPress avatars are nicely sized for the default theme, but your custom theme might benefit from sizing up or down from there.

The two most often used default avatars are the thumbnail and the full size, which are 50px and 150px respectively. They basically look like this in the default theme:

The BuddyPress codex has a list of the avatar settings that can be easily changed using internal configuration settings:

1
2
3
4
define ( 'BP_AVATAR_THUMB_WIDTH', 50 );
define ( 'BP_AVATAR_THUMB_HEIGHT', 50 );
define ( 'BP_AVATAR_FULL_WIDTH', 150 );
define ( 'BP_AVATAR_FULL_HEIGHT', 150 );

Open up bp-custom.php and add this code to change the avatars. Adjust the numbers to achieve your preferred height and width. (This is measured in pixels.) If you don’t have a bp-custom.php file set up yet, it’s very easy. Create a blank file, name it bp-custom.php and pop this in there:

1
2
3
4
<?php
// hacks and mods will go here
 
?>

Make sure to place this file in the wp-content/plugins directory.

Here’s an example of the default theme with the avatar sizes changed to 70px thumbnails and 200px full size:

That’s very easy to do by simply updating those numbers in your bp-custom.php file. Play around with it until you get the sizes that you like.

Additional defines you can set include the maximum width of the original avatar uploaded, the maximum file size of the original uploaded avatar, the image URL for the default avatar when a user hasn’t uploaded one, as well as the URL for the thumbnail of the default avatar:

1
2
3
4
define ( 'BP_AVATAR_ORIGINAL_MAX_WIDTH', 640 );
define ( 'BP_AVATAR_ORIGINAL_MAX_FILESIZE', $max_in_kb );
define ( 'BP_AVATAR_DEFAULT', $img_url );
define ( 'BP_AVATAR_DEFAULT_THUMB', $img_url );

These settings can be very helpful if you don’t want users uploading massive high resolution images as avatars. A file size limit is quite common with many popular social networks, even if is an inconvenience for users to have to resize their photo to something smaller.

If you have any problems or questions in resizing avatars, get in touch with us in the comments or via @wpmuorg on Twitter. We’d be happy to help you get your new avatar sizes working.

Tags

Comments (5)

  1. Thanks Sarah, always pulling through! This worked beautifully.

    For others, my ultimate goal was to make phones and tablets show the Avatar in high resolution (Phones and tablets are generally 2x the resolution of a desktop). Setting;
    Define “Width”, “Height”, “Original Max with” to 300px, then using CSS to scale the image back to 150px (Something like; #buddypress div#item-header img.avatar { max-width: 150px; }) in your child theme should do the trick.

    Thanks again Sarah!

Participate