Otreva currently supports Internet Explorer 9 and higher. You should consider upgrading to get all intended functionality. ×
otreva.com
buddypress_logo

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

in Blog

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.

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

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.

  • http://webmastersintexas.com Jerry Lee

    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.

    • http://www.otreva.com Mike Averto

      Hi Jerry,

      There is a way to do that. It is called a child theme.

      Buddypress has some good documentation in their codex. Scroll to heading: (3) Overriding BuddyPress’ Template Files
      BuddyPress Child Theme Template Files

      • http://www.mattpealing.co.uk/ Matt

        Doesn’t a child theme only override template files though? How would we use a child theme to override core files?

        • http://www.otreva.com Mike Averto

          Hi Matt you are right. What the above comment should say is add the code to your child theme’s functions.php file. @modemlooper is correct below also.

  • modemlooper

    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 );

  • broncos jersey

    Greetings! Very useful advice within this article! It’s the little changes that produce the biggest changes. Thanks a lot for sharing!

  • Vinny

    Thanks a lot!