Changing default avatar size cropped/used by BuddyPress
If you have used BuddyPress, You already know that BuddyPress allows user to upload their own image for avatar/group avatar.
By default, Buddypress allows thumb size to be 50×50 (pixels) and full size to be 150px X 150 px.
If you want to fetch an avatar size greater than 150px, The avatar will look distorted in normla cases. There is a olution though. The easy solution is to change the default avatar size in BuddyPress.
To change the BuddyPress avatar size , you can add the following code in your theme's functions.php or put it in the bp-custom.php file in your wp-content/plugins directory. I use the second way, as It saves a lot of work while updating.
This is what you need to put for BuddyPress to change the default avatar size to be cropped :-
1 2 3 4 5 6 7 8 9 10 11 | if ( ! defined( 'BP_AVATAR_THUMB_WIDTH' ) ) define( 'BP_AVATAR_THUMB_WIDTH', 50 ); //change this with your desired thumb width if ( ! defined( 'BP_AVATAR_THUMB_HEIGHT' ) ) define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); //change this with your desired thumb height if ( ! defined( 'BP_AVATAR_FULL_WIDTH' ) ) define( 'BP_AVATAR_FULL_WIDTH', 260 ); //change this with your desired full size,weel I changed it to 260 :) if ( ! defined( 'BP_AVATAR_FULL_HEIGHT' ) ) define( 'BP_AVATAR_FULL_HEIGHT', 260 ); //change this to default height for full avatar |
That's all. Go and try uploading a new avatar and you will see that the avatar is being cropped as per the custom dimensions specified.
Also, We have a new post to help you change the actual uploadable file size for the BuddyPress User & Group Profile Photo(avatar).
It's a nice tip, but the code is missing.
hi Vinicius
sorry for missing the code, It was imported from my other blog and went missing. I have updated now.
Thanks for pointing.
Brajesh
This is a good tip but for me it seems like it looks pixelated, as if it were resized by CSS. The quality of the image is preserved only if you scale down from the BP default height or down from the full height. Increasing the thumbnail to 80px square will make it look distorted.
hi Sarah
Thanks for the comment and I am sorry for replying late (just missed your comment).
This works perfectly for the newly uploaded avatars after this has been defined, but the old avatars (which were uploaded before the setting change) will be re-sized as in css.
So, the best way to use it when creating a new site and not when a site is live and has a few avatars already uploaded.
Thanks
Brajesh
Hello,
I'm trying to change the thumbnail size of the avatars in the sidebar (for members and groups) but I can't change them this way.
Firefox' Picture Info tells me, that it was my desired width and height (100×100), but it was resized to 25×25.
The above mentioned customization does not work for me in that case.
the avatar IN the group is resized.
cheers
Sven
Hi Sven,
It will work. But the thing is, It works for new uploaded avatars after you have made the change.
Second thing is, depending on your theme, the css of your theme, It may be forced to resize.
Please check the css using fiorebug, that should hlep.
Thanks
Brajesh
Thank you, Brajesh,
I tried that with the current WordPress 3.0.1 and Buddypress 1.2.5. and the default buddypress theme. Also, it seems I'm not using multisite, as I have only that one site for my friends and allow them to do facebook-similar stuff in a closed environment.
It seems like as you said, it's forced to 25×25. Tried anything. The CSS seems php-generated for the sidebar-widgets (members & groups), as I can't find the right file to edit. Any Idea where this should be?
Another question is. The pictures for the "BP nicey" theme show a left sidebar containgin navigational stuff like profile, groups, members, wirem settings for the users. I have seen that style on buddypress.de on the startpage and on a page where Peatling himself presents this as a mockup for the "coming" buddypress default theme, but it seems it was dropped.
Where or how can I get this? Is it a plugin? Do I need multisite activated? another theme?
When I use BP nicey as theme, this part is completely missing. All I get is that transparent Adminbar at the top of the screen. *sigh*
… help! 🙂
Cheers
Sven
I'm making a site for bands (the bands will be buddypress groups)
My issue is that the profile avatars are fine the way they are, but I want to change just the group avatars. Is this possible? Will I have to make up a new function?
this worked for me ..thank you very much ……but photo type is limited to only JPG, GIF or PNG photos.Do anyone know how to change this ???
regards,
Randy
Hi Randy,
Thanks for the comment. Glad to know it worked for you.
You can change the allowed file types in bp_core_check_avatar_type() in the bp-core/bp-core-avars.php, have a look at the regex there.
Please note, if you add something like bmp etc, gd may not be able to resize/create thumb.
Thanks for this, it's gotten me half way there. I'm using a child of the bp-default theme and am now trying to find the CSS rules that are resizing the avatar on the login widget and in the activity stream. Your fix worked on the profile page and on the members page.
How do I differentiate the img-avatar tags for users, vs. the group avatars, which I want to leave at 50×50? Is it possible?
We were doing a bbPress + BuddyPress site and the bbPress avatars were fetching from BuddyPress. Great tip. Thanks a ton !
Thank you for the comment Ravi.
glad it helped 🙂
All works fine
Thank You
Is it possible to do a mass refresh of all of the thumbnails?
Unfortunately I already have over 3,000 members who have already uploaded thumbnails of the smaller size.
It'd be awesome if I could define them and then refresh all existing thumbnails.
Thanks for the tip.
Hi Jordan,
Though you can write a simple script to iterate and do it for you, buddypress won't do that by default.
You can use this function 'bp_core_avatar_handle_crop' to do it for you.
How would I use that function in the comments feed? I've never used that function before so I don't know how to use it.
Thanks
Please allow me a couple of hours and I will put a script to do that for you 🙂
There will be one limitation though. The original files are not saved, so you can not increase the size of image than the current maximum size for the exiting avatars(by default its 450 px).
Sweet, that should be fine, they don't need to be larger than that. Thanks so much!
Thanks for the tip. Works great!
But there's one thing im trying to do.
Im trying to take out the cropping of an image.. or atleast change it so if a user has a longer image they don't have to get cut off.
Would you happen to think of a way to by pass that?
Hey Brajesh, did you figure out a way to do this? I'm still stumped
Hi Jordan,
yes I had created the script. It works fine for small no. of users but in your case since you have around 3000 members, the php script will time out. Another solution will be to use ajax for generating/calling the generator. I am trying to put that in work for now. Will be publishing the script anytime today.
Oh ok, interesting, maybe i'll just send out a sitewide email telling everyone to update their avatars or something.
Hi Brajesh, great tutorial!
is there any way to have rectangular profile avatar (big one, let's say 100×200), but square for all others, so that they would be automatically cropped from big one, or how it happens (something like on facebook)?
thank you!
Hi James,
Just make sure to define 'BP_AVATAR_FULL_WIDTH' and 'BP_AVATAR_FULL_HEIGHT' with the values and it will work.
hi Brajesh, thanks for reply!
actually, I have already tried this way, but issue is that small square avatars won't be cropped, but will be narrowed (hope it is correct word) from the full width avatar (rectangular).
Hi Brajesh, this worked great except the newly uploaded images always seems pixilated even if I upload an image at the exact same size as my finished avatar (650x250px). Did I see that you said there is a maximum image size? Is there a quality setting I need to modify to allow larger images? Thanks!
Is there not a way to do this through functions.php ?