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!
Ā
Members can manage their cover pictures by visiting their profile page and activating the āChange Cover Imageā nav.
Ā
Ā
If the Groups component is active, Groups will also be able to enjoy cover images!
Ā
Ā
Weāve added a new step to the Groupās creation process to let Administrators set the cover image for their Groups
Ā
Ā
At any time, Group Administrators can manage the cover image by displaying the āCover Imageā sub nav of the Groupās management area.
Ā
Ā
Responsive?
Ā
Ā
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.php bp-templates/bp-legacy/buddypress/members/single/profile.php |
bp-templates/bp-legacy/buddypress/members/single/cover-image-header.php bp-templates/bp-legacy/buddypress/members/single/profile/change-cover-image.php |
Group | bp-templates/bp-legacy/buddypress/groups/create.php bp-templates/bp-legacy/buddypress/groups/single/admin.php bp-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.
Ā
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