BuddyPress: How to change avatar (picture) size larger or smaller

  • Posted: December 7, 2011

I was working on a political buddypress social network site and couldn’t find how to resize an avatar like I wanted. After searching around for a bit and not finding a quick solution on how to modify a BuddyPress avatar size, I decided I’d post the solution. What I was trying to do was modify the default BuddyPress members plugin so I could output larger vcards that looked similar to Polaroids with a members name and BuddyPress custom profile field dubbed ‘affiliation’. Here is the example where I was trying this but should be able to use this anywhere in a buddypress install where you need an avatar sized:

Open /wp-content/plugins/buddypress/bp-core/bp-core-widgets.php and look for the LI class “vcard” around line 60. Then find the php tag which outputs the avatar:

bp_member_avatar()

and add ‘type=full&width=125&height=125′ including the ticks.

bp_member_avatar(‘type=full&width=125&height=125′)

This will output a standard 35×35 avatar by default unless you changed the default somewhere else in the install. By researching the accepted parameters, found that I could set the type, height, and width. The reason I set type also was I didn’t want it using the default ‘thumb’ type of 35×35 and resizing up to 125×125 as it would look terrible as you can see here:
buddypress avatar output thumb

I set the type as full so I could resize the 150×150 ‘Full’ image and not have a terrible looking picture.
buddypress full avatar type image

bp_member_avatar(‘type=full&width=125&height=125′)

Each parameter needs to be separated with a ‘&’. That is it, change the 125 in height and width to size to your needs.

Now my political supporters look great.

Mike Averto

Mike Averto

is the Founder and Chief Designer at Otreva Designs. He’s an experienced web developer/designer who specializes in front-end development (JavaScript, HTML, CSS). When not hand-crafting HTML/CSS you'll find him learning about some type of new web technology.

Twitter

5 Responses to “BuddyPress: How to change avatar (picture) size larger or smaller”

  1. Jerry Lee says:

    One question, when doing an update of Buddy Press in the future, will this get overwritten since it’s a core file? If so, is there a way to do this on a custom sheet?
    Thanks for the article.

  2. modemlooper says:

    You can add code to a functions file or adda file bp-custom.php to the wp-content/plugins folder to change image sizes

    Avatar specific settings can be changed:
    define ( ‘BP_AVATAR_THUMB_WIDTH’, 50 );
    define ( ‘BP_AVATAR_THUMB_HEIGHT’, 50 );
    define ( ‘BP_AVATAR_FULL_WIDTH’, 150 );
    define ( ‘BP_AVATAR_FULL_HEIGHT’, 150 );
    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 );

Leave a Reply