Different css to buddypress cover images by role

Hello,

I use the following code that is for applying different css rules to users' avatar images by role. How could the code been modified so it would work for users' cover images too?

add_filter( 'bp_core_avatar_class', 'wpmudev_bp_role_in_class', 10, 4 );

function wpmudev_bp_role_in_class( $class, $item, $object, $params ){

	$user = new WP_User( $item );

	if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
		foreach ( $user->roles as $role ){

			$class = $role . ' ' . $class;

		}
	}

	return $class;
}
  • Sajid

    Hi lesanis,
    Hope you are doing good today!

    I tried to find the filter hook like above to add the classes but could not find it. Then I came up with custom PHP + jQuery code snippet for you to add the user roles as class names to cover images. Try adding following code in functions.php file of your child theme or use it as mu-plugin.

    function sjaved_add_class_to_bp_cover_image_base_on_role(){
    
    	global $bp;
    
    	$user = new WP_User( $bp->displayed_user->id );
    
    	if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
    		foreach ( $user->roles as $role ){
    
    			$class .= $role . ' ';
    
    		}
    	}?>
    
    	<script type="text/javascript">
    
    	jQuery(document).ready(function($){
    
    		$('#header-cover-image').addClass( '<?php echo $class; ?>');
    
    	});
    	</script>
    
    <?php 	
    
    }
    add_action('wp_footer', 'sjaved_add_class_to_bp_cover_image_base_on_role', 99);

    If you take the mu-plugin route, you'll want to log into your site via FTP, and go to your /wp-content/ folder via FTP, finding the folder called "mu-plugins".

    If there's no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like (making sure the file has an extension of .php, e.g. example.php) and paste the code in there.

    It'll always be active, so there's no need to activate the plugin after creation. Be sure to add a PHP start tag at the beginning of the code, like this:

    <?php

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • lesanis

    Hello Sajid,

    Thank you so much about the solution you provided but it works partially for me. I would like to hide cover image and some other elements for specific user roles. The issue is that with jQuery when the page first loads the elements are visible and they dissapear a few seconds later and that is no very nice for the users. I am showing that I want to hide something from them. Is there a way to make the code work without jQuery?

    Thank you,
    Lesanis

  • Sajid

    Hello lesanis,
    Hope you are doing good today :slight_smile:

    Yes, I understand what you are after but as I said above there is no direct hook/filter is available to add CSS class to this element like AVATAR.

    If the above method did not worked well for you then you have to override the full template and make changes there.

    To override template follow the steps below:

    1. Create a new folder called buddypress in your current theme folder.

    2. Now withing this folder create four new folders with exact same structure:
    bp-templates/bp-legacy/buddypress/members

    3. Now download the attached file cover-image-header.zip on your computer.

    4. Extract/unzip it and upload to following location via FTP program like FileZilla or FileManage of cPanel:
    wp-content/themes/<strong>your-theme</strong>/buddypress/bp-templates/bp-legacy/buddypress/members

    5. Done!

    Please see this article for more details about template hierarchy:
    https://codex.buddypress.org/themes/theme-compatibility-1-7/a-quick-look-at-1-7-theme-compatibility/

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • lesanis

    Hello Sajid,

    This solution is exactly what I need but there is propably a little mistake in the code. On the header image of the profiles that for those roles the header image is not hidden, appears this line
    href=http://mydomain.com/members/current-user's-name

    Here are is the beginning of the original file

    <?php
    /**
     * BuddyPress - Users Cover Image Header
     *
     * @package BuddyPress
     * @subpackage bp-legacy
     */
    
    ?>
    
    <?php
    
    /**
     * Fires before the display of a member's header.
     *
     * @since 1.2.0
     */
    do_action( 'bp_before_member_header' ); ?>
    
    <div id="cover-image-container">
    	<a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>
    
    	<div id="item-header-cover-image">
    		<div id="item-header-avatar">
    			<a href="<?php bp_displayed_user_link(); ?>">
    
    				<?php bp_displayed_user_avatar( 'type=full' ); ?>
    
    			</a>
    		</div><!-- #item-header-avatar -->
    
    		<div id="item-header-content">

    and this is the beginning of your file

    <?php
    /**
     * BuddyPress - Users Cover Image Header
     *
     * @package BuddyPress
     * @subpackage bp-legacy
     */
    
    ?>
    
    <?php
    
    /**
     * Fires before the display of a member's header.
     *
     * @since 1.2.0
     */
    do_action( 'bp_before_member_header' ); 
    
    global $bp;
    
    	$user = new WP_User( $bp->displayed_user->id );
    
    	if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
    		foreach ( $user->roles as $role ){
    
    			$class .= $role . ' ';
    
    		}
    	}
    
    ?>
    
    <div id="cover-image-container">
    	<a id="header-cover-image" class="<?php echo $class; ?>"> href="<?php bp_displayed_user_link(); ?>"></a>
    
    	<div id="item-header-cover-image">
    		<div id="item-header-avatar">
    			<a href="<?php bp_displayed_user_link(); ?>">
    
    				<?php bp_displayed_user_avatar( 'type=full' ); ?>
    
    			</a>
    		</div><!-- #item-header-avatar -->
    
    		<div id="item-header-content">

    Could you please fix it? :relaxed:

    Thank you,
    lesanis

  • Sajid

    Hi lesanis,
    Hope you are doing good today :slight_smile:

    Yes, I can see the mistake in the code now and fixed it. Please try the updated code below and then check again.

    <?php
    /**
     * BuddyPress - Users Cover Image Header
     *
     * @package BuddyPress
     * @subpackage bp-legacy
     */
    
    ?>
    
    <?php
    
    /**
     * Fires before the display of a member's header.
     *
     * @since 1.2.0
     */
    do_action( 'bp_before_member_header' ); 
    
    global $bp;
    
    	$user = new WP_User( $bp->displayed_user->id );
    
    	if ( !empty( $user->roles ) && is_array( $user->roles ) ) {
    		foreach ( $user->roles as $role ){
    
    			$class .= $role . ' ';
    
    		}
    	}
    
    ?>
    
    <div id="cover-image-container">
    	<a id="header-cover-image" class="<?php echo $class; ?>"> href="<?php bp_displayed_user_link(); ?>"></a>
    
    	<div id="item-header-cover-image">
    		<div id="item-header-avatar">
    			<a href="<?php bp_displayed_user_link(); ?>">
    
    				<?php bp_displayed_user_avatar( 'type=full' ); ?>
    
    			</a>
    		</div><!-- #item-header-avatar -->
    
    		<div id="item-header-content">

    Hope that helps! If you still need assistance, please don't hesitate to ask.

    Take care and have a nice day :slight_smile:

    Kind Regards,
    Sajid J

  • lesanis

    Hello Sajid,

    Thank you so much for the updated code but unfortunatelly the line
    href=http://mydomain.com/members/current-user's-name ">
    still appears on the cover image. I assume that the mistake might be in the line
    <a id="header-cover-image" class="<?php echo $class; ?>"> href="<?php bp_displayed_user_link(); ?>"></a>
    The original line is
    <a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>
    Could you please check it once more for me?

    Thank you again,
    lesanis

  • Sajid

    Hi lesanis,

    Hope you are doing good today :slight_smile:

    Yes, that is what I fixed in the above code but I think I posted old code instead. Try to replace this line:
    <a id="header-cover-image" class="<?php echo $class; ?>"> href="<?php bp_displayed_user_link(); ?>"></a>

    <a id="header-cover-image" class="<?php echo $class; ?>" href="<?php bp_displayed_user_link(); ?>"></a>

    and then check again.

    Hope this helps. But in case if it still don't then please send in FTP and WordPress admin login details so I could do it myself for you via our contact form in following format.

    Subject: "Attn: Sajid Javed"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Take care and have a nice day :slight_smile:

    Kind Regards,
    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.