[buddypress-trac] [BuddyPress Trac] #6570: Add UI for adding Profile Header Images for Users and Groups

buddypress-trac noreply at wordpress.org
Sat Aug 15 13:04:24 UTC 2015

#6570: Add UI for adding Profile Header Images for Users and Groups
 Reporter:  mercime                 |       Owner:
     Type:  enhancement             |      Status:  new
 Priority:  normal                  |   Milestone:  2.4
Component:  API                     |     Version:
 Severity:  normal                  |  Resolution:
 Keywords:  dev-feedback has-patch  |
Changes (by imath):

 * keywords:  dev-feedback => dev-feedback has-patch


 Again, get ready for a pretty long comment!

 So i've been seriously working (not to say "fast & furiously"!) on a new
 patch: 6570.02.patch. I focused on the User's profile header, but plan to
 carry on if we all agree on the choices i've made :)

 But before, if you wish to see the feature in action, here's a demo of it:

 ==== BP Theme Compat instead of `add_theme_support()` ====
 We made this choice during latest dev-chat. In short: we are editing some
 BP Legacy templates so that any BuddyPress standalone themes will have the
 time/choice to edit their templates to also use it. In the meantime we
 make sure to play nice with their layout. Any WordPress Theme using BP
 Theme Compat (as soon the templates we're editing are not overriden in
 them) can use the feature immediately.

 The edited templates in the patch are :
 - `src/bp-templates/bp-legacy/buddypress/members/single/home.php` : it now
 includes a conditional check to see if the displayed user has a cover
 image, if so we load the new header template `src/bp-templates/bp-
 legacy/buddypress/members/single/cover-image-header.php` else, we load the
 regular header template.
 - `src/bp-templates/bp-legacy/buddypress/members/single/profile.php`: it
 now includes a check on the current action to eventually load `src/bp-
 image.php` and be able to set the user's cover image.

 ==== BP User Navigation & WP Admin Bar loggedin user's menu  ====
 To make sure no 'Change your Cover' item nav is added in case the
 BuddyPress standalone theme has not implemented the template changes, this
 is my suggestion: use `bp_is_active( 'component', 'feature' )` and
 introduce a new function `bp_set_theme_compat_feature()`. This way
 nothing's happening for the themes i was talking about, and for Themes
 using BP Legacy, the feature is automatically registered within `src/bp-
 `bp_set_theme_compat_feature()` is doing 2 things:
 - carry the feature settings (components, width, height, callback..)
 - activate the feature for the targetted components, in the case of the
 'cover_image' feature it's `xprofile` and `groups`.

 Then before adding the nav, i'm simply doing a `bp_is_active( 'xprofile',
 'cover_image' )` so that we are completely playing nice with Standalone

 About Options: @mercime suggested to add new options to let Admins
 disable/enable the feature. To be honest i'm feeling pretty incomfortable
 about adding new options. But of course i can be wrong and it will always
 be possible to add these options later.

 My personal opinion is: as an admin, i would allow users to upload files
 or groups to upload files no matter if it's an avatar or a cover image or
 any other features. And for the particular case of the cover image,
 without an avatar it's not great :) So if avatar uploads are disabled, i
 disable the cover image.
 Moreover, in the future, there's a good chance we add other attachments
 features, i'm not sure it's great to systematically add a new option for
 each new feature. My suggested plan about it, is:
 - 1 option by component eg: allow user uploads, allow group uploads
 - then a more granular control using for instance `add_filter(
 'bp_is_active_xprofile_cover_image', '__return_false' );`

 ==== Companion Stylesheets & BuddyPress Cover Image's inline css ====
 We now have companion stylesheets to improve BuddyPress layout for
 twenties. 3 themes so far are concerned :
 - twentythirteen,
 - twentyfifteen,
 - twentyfourteen,

 The companion stylesheets are a great improvement, but they are not
 necessarly taking in account the `$content_width` global of the theme. So
 for these themes, it's pretty difficult to figure out the `#buddypress`
 width, which in the case of cover image is kind of important!
 So you'll see that in the new `BP_Legacy->setup_features()`, i'm using by
 default `$content_width` which works great with twentytwelve for instance
 (and i guess with most themes), and then use specific `$bp_content_widths`
 for the themes having a companion stylesheet. It works fine with 2 of
 them, but twentyfifteen is problematic, so i'm using an arbitrary value as
 it's impossible to know about any max-width as the BuddyPress content
 takes all the available space left at the right of the sidebar. Ideally,
 it would be great for this particular theme (at least) to define a
 `#buddypress { max-width:1300px; }` for instance.

 In `src/bp-templates/bp-legacy/buddypress/buddypress-functions.php`,
 you'll find the callback function `bp_legacy_theme_cover_image()` that
 returns the custom css for the cover image header. I've included a lot of
 rules into it so that this specific header looks similar in twenties. But
 i think this would need to be improved. Most of the css rules should
 probably be in buddypress.css for some and in companion stylesheets for
 others. I think in this function we should only have the 2 first rules.

 ==== The new cover-image-header.php ====
 I've reorganized the markup a bit, so these changes surely need to be
 checked. Basically, i'm adding a container: `div#item-header-cover-image`,
 the cover image is the background of this selector.

 ==== The new BP_Attachment_Cover_Image class & the Cover Image UI ====
 The class is managing the uploads and resizing images so that it fits with
 the cover image settings. I'm not using the cropping tool. @BuddyBoss is
 not using it either and @johnjamesjacoby was thinking it was not that
 necessary. I feel the same, and i'll add that now that the User's subnav
 is vertical in the Themes having a companion stylesheet, the cropping
 interface is tighter than the needed width which is not great. So i'm
 dynamically cropping the image.

 Upload dir organisation: in a previous comment i already talked about my
 opinion about this. I think we need to reorganize this part. And I've
 begun with this feature. Users cover image will be in `/wp-
 content/uploads/buddypress/members/user_id/cover-image`. I think this kind
 of organisation will allow us to have a very obvious place for any
 administrator about where we are saving files, and it will allow us to
 save other files or directories (eg: YY/MM) inside the `/wp-
 content/uploads/buddypress/members/user_id` in future releases.
 NB: i'm not touching to avatar folders, but ideally i think they should
 move into `/wp-content/uploads/buddypress/members/user_id/avatar` or `/wp-

 When a user is setting or removing his cover image, the header is
 dynamically refreshed without any page reload.
 Possible improvements: avatar.css is used because i've put the Uploader
 css rules in there. I know @hnla posted a ticket about this.

 ==== BuddyPress standalone Themes.. How to? ====
 For standalone themes wishing to use the BuddyPress Cover Images feature,
 i've made some tests using the only one i have: "Swifter". Many thanks to
 @johnjamesjacoby :)

 1) How i've registered the Cover Feature
 a) the easiest way:
 bp_set_theme_compat_feature( 'legacy', array(
         'name'     => 'cover_image',
         'settings' => array(
                 'components'   => array( 'xprofile', 'groups' ), /* or you
 can only use array( 'xprofile' ) to restrict the cover image to users */
                 'width'        => 1170,
                 'height'       => 225,
                 'callback'     => 'swifter_theme_cover_image', /* function
 that will return to BuddyPress the css to attach to the theme_handle */
                 'theme_handle' => 'swifter',
 ) );

 b) an Alternative way:
 add_filter( 'bp_is_active_xprofile_cover_image', '__return_true' );

 function swifter_xprofile_cover_image( $settings = array() ) {
         return array(
                 'components'   => array( 'xprofile' ),
                 'width'        => 1170,
                 'height'       => 225,
                 'callback'     => 'swifter_theme_cover_image',
                 'theme_handle' => 'swifter',
 add_filter( 'bp_before_xprofile_cover_image_settings_parse_args,
 'swifter_xprofile_cover_image', 10, 1 );

 2) The callback function
 Then i've copy-pasted the `bp_legacy_theme_cover_image()` function into
 the swifter theme, without forgetting to rename it to match the callback
 argument in `bp_set_theme_compat_feature()` : 'swifter_theme_cover_image'.
 I've edited the inline css returned by this function to ajust css rules to
 the Swifter theme.

 NB: Then, i had to change the priority Swifter is using to hook
 `wp_enqueue_scripts` as it was too late. Using a 9 priority (just before
 `bp_enqueue_scripts` ) is fine. Should BuddyPress hook to
 `wp_enqueue_scripts` at a later priority to avoid this ?

 3) Edit the templates
 Finally i've edited `src/bp-templates/bp-
 legacy/buddypress/members/single/home.php` and `src/bp-templates/bp-
 legacy/buddypress/members/single/profile.php` to include the changes
 included in the patch for these two templates. You don't need to add the
 new templates, the templates of BP Legacy will be used.

 4) Tada!

 Let me know what you think about my suggestions :)

Ticket URL: <https://buddypress.trac.wordpress.org/ticket/6570#comment:33>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac

More information about the buddypress-trac mailing list