Skip to content

Instantly share code, notes, and snippets.

@imath
Created September 27, 2015 15:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imath/7e936507857db56fa8da to your computer and use it in GitHub Desktop.
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
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