-
-
Save imath/7e936507857db56fa8da to your computer and use it in GitHub Desktop.
Example of how you can use the 2.4 BuddyPress cover image feature for users profiles in BP Default
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git functions.php functions.php | |
index dd18c9e..0522e66 100644 | |
--- functions.php | |
+++ functions.php | |
@@ -234,7 +234,7 @@ function bp_dtheme_enqueue_styles() { | |
} | |
} | |
} | |
-add_action( 'wp_enqueue_scripts', 'bp_dtheme_enqueue_styles' ); | |
+add_action( 'wp_enqueue_scripts', 'bp_dtheme_enqueue_styles', 9 ); | |
endif; | |
if ( !function_exists( 'bp_dtheme_admin_header_style' ) ) : | |
@@ -825,3 +825,139 @@ function bp_dtheme_add_brackets_to_multiselectbox_attributes( $name ) { | |
return $name; | |
} | |
add_filter( 'bp_get_the_profile_field_input_name', 'bp_dtheme_add_brackets_to_multiselectbox_attributes' ); | |
+ | |
+// Register the Cover Image feature for Users profiles | |
+function bp_default_register_feature() { | |
+ bp_set_theme_compat_feature( 'legacy', array( | |
+ 'name' => 'cover_image', | |
+ 'settings' => array( | |
+ 'components' => array( 'xprofile' ), | |
+ 'width' => 940, | |
+ 'height' => 225, | |
+ 'callback' => 'bp_default_cover_image', // See line 845 | |
+ 'theme_handle' => 'bp-default-main', | |
+ ), | |
+ ) ); | |
+} | |
+add_action( 'bp_after_setup_theme', 'bp_default_register_feature', 10 ); | |
+ | |
+// Example of function to customize the display of the cover image | |
+function bp_default_cover_image( $params = array() ) { | |
+ if ( empty( $params ) ) { | |
+ return; | |
+ } | |
+ | |
+ // avatar height - padding - 1/2 avatar height | |
+ $avatar_offset = $params['height'] - 5 - round( (int) bp_core_avatar_full_height() / 2 ); | |
+ | |
+ // header content offset + spacing | |
+ $top_offset = bp_core_avatar_full_height() - 10; | |
+ $left_offset = bp_core_avatar_full_width() + 20; | |
+ | |
+ $cover_image = isset( $params['cover_image'] ) ? 'background-image: url(' . $params['cover_image'] . ');' : ''; | |
+ | |
+ $hide_avatar_style = ''; | |
+ | |
+ // Adjust the cover image header, in case avatars are completely disabled | |
+ if ( ! buddypress()->avatar->show_avatars ) { | |
+ $hide_avatar_style = ' | |
+ #item-header-cover-image #item-header-avatar { | |
+ display: none; | |
+ } | |
+ '; | |
+ | |
+ if ( bp_is_user() ) { | |
+ $hide_avatar_style = ' | |
+ #item-header-cover-image #item-header-avatar a { | |
+ display: block; | |
+ height: ' . $top_offset . 'px; | |
+ margin: 0 15px 19px 0; | |
+ } | |
+ | |
+ div#item-header #item-header-cover-image #item-header-content { | |
+ margin-left:auto; | |
+ } | |
+ '; | |
+ } | |
+ } | |
+ | |
+ return ' | |
+ /* Cover image */ | |
+ | |
+ #item-header-cover-image { | |
+ padding: 0 1em; | |
+ z-index: 999; | |
+ position:relative; | |
+ } | |
+ | |
+ #header-cover-image { | |
+ background-color: #eaeaea; | |
+ background-position: center top; | |
+ background-repeat: no-repeat; | |
+ background-size: cover; | |
+ border: 0; | |
+ display: block; | |
+ left: 0; | |
+ margin: 0; | |
+ padding: 0; | |
+ position: absolute; | |
+ top: 0; | |
+ width: 100%; | |
+ z-index: 1; | |
+ height: ' . $params["height"] . 'px; | |
+ ' . $cover_image . ' | |
+ } | |
+ | |
+ .bp-user #item-header { | |
+ padding-top: 0; | |
+ position: relative; | |
+ } | |
+ | |
+ #item-header-cover-image #item-header-avatar { | |
+ margin-top: '. $avatar_offset .'px; | |
+ float: left; | |
+ overflow: visible; | |
+ width:auto; | |
+ } | |
+ | |
+ div#item-header #item-header-cover-image #item-header-content { | |
+ clear: both; | |
+ float: left; | |
+ margin-left: ' . $left_offset . 'px; | |
+ margin-top: -' . $top_offset . 'px; | |
+ width:auto; | |
+ } | |
+ | |
+ ' . $hide_avatar_style . ' | |
+ | |
+ div#item-header-cover-image h2 a, | |
+ div#item-header-cover-image h2 { | |
+ color: #FFF; | |
+ text-rendering: optimizelegibility; | |
+ text-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.8 ); | |
+ margin: 0; | |
+ font-size:200%; | |
+ } | |
+ | |
+ #item-header-cover-image #item-header-avatar img.avatar { | |
+ border: solid 2px #FFF; | |
+ background: rgba( 255, 255, 255, 0.8 ); | |
+ } | |
+ | |
+ #item-header-cover-image #item-header-avatar a { | |
+ border: none; | |
+ text-decoration: none; | |
+ } | |
+ | |
+ #item-header-cover-image #item-buttons { | |
+ overflow:hidden; | |
+ margin: 20px 0 10px; | |
+ padding: 0 0 5px; | |
+ } | |
+ | |
+ #item-header-cover-image #item-buttons:before { | |
+ content:"\00a0"; | |
+ } | |
+ '; | |
+} | |
+ | |
diff --git members/single/home.php members/single/home.php | |
index 0c48e27..e917db1 100644 | |
--- members/single/home.php | |
+++ members/single/home.php | |
@@ -16,7 +16,11 @@ get_header( 'buddypress' ); ?> | |
<div id="item-header" role="complementary"> | |
- <?php locate_template( array( 'members/single/member-header.php' ), true ); ?> | |
+ <?php if ( bp_displayed_user_use_cover_image_header() ) : | |
+ bp_get_template_part( 'members/single/cover-image-header' ); | |
+ else : | |
+ bp_get_template_part( 'members/single/member-header' ); | |
+ endif; ?> | |
</div><!-- #item-header --> | |
diff --git members/single/profile.php members/single/profile.php | |
index 4f4e14c..e61ebe9 100644 | |
--- members/single/profile.php | |
+++ members/single/profile.php | |
@@ -28,6 +28,10 @@ | |
elseif ( bp_is_current_action( 'change-avatar' ) ) | |
locate_template( array( 'members/single/profile/change-avatar.php' ), true ); | |
+ // Change Cover Image | |
+ elseif ( bp_is_current_action( 'change-cover-image' ) ) | |
+ bp_get_template_part( 'members/single/profile/change-cover-image' ); | |
+ | |
// Display XProfile | |
elseif ( bp_is_active( 'xprofile' ) ) | |
locate_template( array( 'members/single/profile/profile-loop.php' ), true ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment