Most social media include a feature to allow their users to customize their profile’s header. While this feature may seem trivial, it is actually quite complex to implement in our case.
Unlike these social media which only need to manage one single graphical interface, BuddyPress can be integrated into nearly all WordPress themes and needs to account for all scenarios.
Of course, this complexity is also one of our major strengths: BuddyPress lets you build highly customized community websites.
To add to this complexity, some BuddyPress themes or plugins have already built this feature.
That’s why during the development of this feature and in all the decisions we took we always kept in mind these two concerns:
- Maximize the feature’s compatibility with most themes
- Include simple ways to deactivate it (if needed)
Before telling you more about these 2 points, here are the BuddyPress Cover Images!
User’s profile
Members can manage their cover pictures by visiting their profile page and activating the “Change Cover Image” nav.
“Change Cover Image” screen
If the Groups component is active, Groups will also be able to enjoy cover images!
Group’s Cover Image
We’ve added a new step to the Group’s creation process to let Administrators set the cover image for their Groups
Group’s Cover Image creation step
At any time, Group Administrators can manage the cover image by displaying the “Cover Image” sub nav of the Group’s management area.
Group’s Cover Image manage screen
Responsive?
User and Group cover images viewed on a smartphone.
Of course!
1. Maximize the feature’s compatibility with most themes
To make this happen, we rely on our great BP Theme Compat API. In short, we are checking the active theme is using the API and the BP Legacy template pack before registering the feature. If it’s the case, BP Theme Compat will take care of everything!
If you’re wondering how the size of the cover image is calculated, i’d say it’s an “equation” involving two parameters: the $content_width global of the theme and the Avatar’s full height.
We have already optimized the feature for the latest “Twenties”. By the way all the screencaps of this article were made using the “TwentyFifteen” theme.
Please note that the BP Legacy template pack has evolved :
| Single items | Edited Templates | New Templates |
|---|---|---|
| User | bp-templates/bp-legacy/buddypress/members/single/home.phpbp-templates/bp-legacy/buddypress/members/single/profile.php |
bp-templates/bp-legacy/buddypress/members/single/cover-image-header.phpbp-templates/bp-legacy/buddypress/members/single/profile/change-cover-image.php |
| Group | bp-templates/bp-legacy/buddypress/groups/create.phpbp-templates/bp-legacy/buddypress/groups/single/admin.phpbp-templates/bp-legacy/buddypress/groups/single/home.php |
bp-templates/bp-legacy/buddypress/groups/single/cover-image-header.php |
If your theme is using the BP Theme Compat API (which is the case of most WordPress themes) and if you haven’t overridden the templates listed inside the “Edited Templates” column, then as our test drive is attesting: BuddyPress Cover Images should look awesome into your community.
If you’ve overridden one of the edited templates and you want to enjoy this new feature, please make sure to update your templates by the time BuddyPress 2.4.0 is released.
If your theme requires some “fine-tuning” or if you’re feeling the need to customize the default appearance of the members profiles and groups headers, be assured that you’ll be able to do it easily. I’ll be publishing more information in the BuddyPress Codex about it.
For Standalone BuddyPress themes like BP Default.
These themes are using their very own templates and are generally adding BuddyPress support (add_theme_support( 'buddypress' ) ) into their functions.php file. In this case, the BP Theme Compat API won’t register dynamically the BuddyPress cover images feature. But, it will be very easy for these themes to enjoy it! If you’re eager to see how this will be possible, you can have a look at a diff i’ve made when testing the BP Default theme 🙂
Include simple ways to deactivate it (if needed)
Your theme is using the BP Theme Compat API and you want to deactivate Cover Images for members, groups or both?
First, at any time, you can do it by deactivating the corresponding setting for cover images in Settings > BuddyPress > Settings as shown in the screencap below.
BuddyPress Settings
Another way to completely deactivate it is to use these filters :
// For members : add_filter( 'bp_is_profile_cover_image_active', '__return_false' ); // For groups : add_filter( 'bp_is_groups_cover_image_active', '__return_false' );
Or you can stop the BP Theme Compat API from dynamically registering the BuddyPress Cover Images support for you site using this kind of code :
function cover_images_no_support() {
remove_action( 'bp_after_setup_theme', 'bp_register_theme_compat_default_features', 10 );
}
add_action( 'after_setup_theme', 'cover_images_no_support' );
If you are a theme designer or the author of a plugin managing Cover images, we recommend that you don’t forget to test that everything works fine for you during the 2.4.0 beta period.
Of course everyone is welcome to help us by testing BuddyPress during this period 🙂
Finally, we’d like to thank all the contributors who gave their professional feedback while building this new “Attachment” feature with special mention to @modemlooper and @BuddyBoss.
To read the full story of this feature: #6570
BP Dev Updates 