If there is one thing that I am often asked to personalize on a social network built with the CMS Buddypress, that’s good avatar management. Indeed, there is on the one hand the fact that the avatar always links to the page already open, which is in itself useless, and on the other hand its size, which cannot be easily customized for a non- initiated.

I will therefore simply explain to you how to ensure that the avatar no longer links to the profile when you are already on the profile page but rather to the image serving as the avatar, and then how to modify the native sizes of the avatars to allow an avatar to open in a larger size when clicked (are you following me?!).

1. How to link the avatar to its full size image

members-header.php

Please leave this field empty

Don't miss business advice by email

No spam, just an email when new content is published.

Check your inbox or spam folder to confirm your subscription.

Go to your file member-header.php (located in the members/single/ folder of your Buddypress theme). Once in this file, find the line of code corresponding to this:

<a href="/en/ »NO NUMERIC NOISE KEY/" 1000 »>

<?php bp_displayed_user_avatar( ‘type=full’ ); ?>

</a>

Replace this code with this one:

<a href="/en/ »NO NUMERIC NOISE KEY/" 1000 »>

<?php bp_displayed_user_avatar( ‘type=full&width=150&height=150’ ) ?>

</a>

As you can see, here we use the function bp_core_fetch_avatar, with the attribute 'html' => false, which allows highlight avatar URL, without the accompanying HTML language ( <img src =…).

Upload the members-header.php file.

Once this step is done, your avatar should normally link to the image and no longer to the profile. Now it remains to modify the avatar sizes, in order to keep the miniature avatar for the list of profiles, but to have a slightly larger avatar when clicked.

2. How to change avatar sizes in Buddypress

functions.php

To do this, nothing could be simpler, go to your functions file (functions.php) to add these lines of code:

if ( !defined( 'BP_AVATAR_THUMB_WIDTH' ) )
define( 'BP_AVATAR_THUMB_WIDTH', 50 ); //Put the width you want for the thumbnail size
if ( !defined( 'BP_AVATAR_THUMB_HEIGHT' ) )
define( 'BP_AVATAR_THUMB_HEIGHT', 50 ); //Height of miniature sizes
if ( !defined( 'BP_AVATAR_FULL_WIDTH' ) )
define( 'BP_AVATAR_FULL_WIDTH', 400 ); //Actual size width
if ( !defined( 'BP_AVATAR_FULL_HEIGHT' ) )
define( 'BP_AVATAR_FULL_HEIGHT', 400 ); //Height of actual size

Using this piece of code, you set the real size of the avatars to 400*400, and the size of the miniature avatars to 50*50.

3. Extensions & remarks

You can easily add a “lightbox” type attribute, via rel="lightbox" for example, if you have a plugin that handles this kind of thing. This will make your avatars load in a slightly sexier way.

Furthermore, I refer you to the attributes of the function bp_displayed_user_avatar( 'type=full&width=150&height=150' ) : as you can see, we chose to display the avatar in “full”, that is to say in real size, but by resizing the output, so that on the profile page, we have a intermediate size image.

This method is certainly not recommended from the point of view of page loading speed, but avoids adding a new image size for the avatars. You can however play with these attributes, choosing to put 'type=thumb' rather than full in the places you want.

Conclusion: your social network highlights profile photos

Thanks to this method, your members' avatars now link to larger images, which is much more practical for managing networks where the profile photo is important.