[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
Comment:
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:
https://vimeo.com/136356743
==== 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-
templates/bp-legacy/buddypress/members/single/profile/change-cover-
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-
templates/bp-legacy/buddypress/buddypress-functions.php`.
`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
Themes.
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-
content/uploads/buddypress/groups/group_id/avatar`.
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!
[[Image(https://farm6.staticflickr.com/5619/20405951060_af4b9df219_b.jpg)]]
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