BuddyDev

Search

Change avatar size in Member Directory page only

Tagged: 

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 15, 2018 at 3:46 pm #13436

    Hello,

    I don’t know where to post. The support forum of BuddyPress is unhelpful, nobody helps. So this may be a good place I can get help. I would like to change avatar size in the member directory page, just only this page, not other places else. According to the theme design I use, the profile avatar in the Profile looks great. It looks big enough and I’m satisfied. I just want to change the one in the member directory page to look bigger like the one in the profile. How can I do that? I’ve inspected the element in the member directory page and found that the default value is width=66 and height=66. So I change the style to 160px as below:

    #buddypress .item-avatar img {
    width: 160px;
    height: 160px;
    }

    The size’s increased but it looks blurred. Where can I add or change the code in php without being blurred?

    Thanks.

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 15, 2018 at 3:49 pm #13437

    If I add this one, does this apply to the one in the profile as well? Because I want to apply to the member directory page only.

    define ( ‘BP_AVATAR_THUMB_WIDTH’, 80 );
    define ( ‘BP_AVATAR_THUMB_HEIGHT’, 80 );
    define ( ‘BP_AVATAR_FULL_WIDTH’, 250 );
    define ( ‘BP_AVATAR_FULL_HEIGHT’, 250 );

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on February 15, 2018 at 4:04 pm #13439

    Hi Topy,
    You are welcome to ask here any question.

    For now,
    Please put this

    
define ( 'BP_AVATAR_THUMB_WIDTH', 160 );
define ( 'BP_AVATAR_THUMB_HEIGHT', 160 );

    It will change the thumb size everywhere(activity, dir etc). You will need to re upload avatar to generate with new size.

    If this is not what you want and you only specifically need it for the members directory list, there are other ways(using a filter).

    Hope this helps.

    Regards
    Brajesh

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 15, 2018 at 4:52 pm #13441

    I’ve Done! Brajesh. Thank you very much.

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 15, 2018 at 4:58 pm #13442

    By the way, Brajesh. I also apply this one to change the default size of mysteryman, the gravatar.

    define ( 'BP_AVATAR_DEFAULT', 'https://mysite.com/wp-content/uploads/2018/02/9add5c7d20fee64cb5840e37c93538e6.jpg' );
define ( 'BP_AVATAR_DEFAULT_THUMB', 'https://mysite.com/wp-content/uploads/2018/02/9add5c7d20fee64cb5840e37c93538e6.jpg' );

    But it applies to the member directory page but doesn’t apply to myCred leaderboard. Do you know how to change this one too. myCred leaderboard displays top ten users by rank, avatar, points.

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on February 15, 2018 at 8:12 pm #13447

    Hi Topy,
    Thank you.

    1. Is the member list issue resolved(Sorry, I am a bit confused from the reply)

    2. For myCred, I will need a day to check as I don’t have it installed. It may not be using BuddyPress avatar function and might be calling get_avatar instead.

    Thank you
    Brajesh

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 16, 2018 at 3:27 am #13454

    Yes, The number 1 is solved.

    Thank you.

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 16, 2018 at 3:53 am #13455

    For the number2, actually mycred leaderboard comes with the theme and I use a shortcode provided from the theme to display the leaderboard. The uploaded profile picture here at the leaderboard is width 50 and height 50 by default. I’ve changed the style to

    .gfy-bp-component img.avatar {
    width: 160px;
}

    But It’s not blurred like the number 1 issue. Just only the gravatar is blurred.It’s now 50 by default.

    Previously, I’m done with this code

    /**
 * Add Avatars To Leaderboard
 * @since 1.0
 * @version 1.0
 */
add_filter( 'mycred_ranking_row', 'mycredpro_add_avatars_to_leaderboard', 10, 4 );
function mycredpro_add_avatars_to_leaderboard( $layout, $template, $user, $position ) {

	if ( isset( $user->ID ) )
		$user_id = $user->ID;

	elseif ( isset( $user['ID'] ) )
		$user_id = $user['ID'];

	else return $layout;

	$avatar = get_avatar( $user_id, 90 );

	return str_replace( '%avatar%', $avatar, $layout );

}

    But this time the leaderboard comes with the theme. I don’t know where to change. The above doesn’t work. The plugin associated with mycred and this theme comes with the theme, it’s gambifly. I’ve check the template file in the plugin, it looks like this

    <?php
// Prevent direct script access.
if ( ! defined( 'ABSPATH' ) ) {
	die( 'No direct script access allowed' );
}

/**
 * @var $component_classes      string Component HTML classes
 * @var $component_id           string Component unique id
 * @var $shortcode_config       array<string,mixed> Shortcode attributes
 * @version 1.0
 */
$local_config = array(
	'wrap'      => 'tr',
	'template'  => "<td class='user-position'>%position%</td>
					<td class='user-avatar'>%user_avatar%</td>
					<td class='user-name'>%user_profile_link%</td>
					<td class='user-rank'>%user_rank_logo%</td>
					<td class='user-points'>%cred_f%</td>"
);
$shortcode_config = array_merge( $shortcode_config, $local_config ); ?>
<div class="<?php echo $component_classes; ?>">
	<div class="table-responsive">
		<table class="table table-condensed mycred-table gfy-table">
			<thead>
				<tr>
					<th class='user-position'>#</th>
					<th class='user-avatar'><?php _e( 'Avatar', 'gamify' ); ?></th>
					<th class='user-name'><?php _e( 'Username', 'gamify' ); ?></th>
					<th class='user-rank'><?php _e( 'Rank', 'gamify' ); ?></th>
					<th class='user-points'><?php _e( 'Points', 'gamify' ); ?></th>
				</tr>
			</thead>
            <tbody>
                <?php
                    $output = gfy_do_shortcode( 'mycred_leaderboard', $shortcode_config );
                    echo GFY_BP_Leaderboard_Component_Template::get_instance()->get_total() ?
                        $output : sprintf( '<tr><td colspan="5">%s</td></tr>', $output );
                ?>
            </tbody>
		</table>
	</div>
</div>
  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on February 17, 2018 at 11:17 am #13461

    Hi Topy,
    Thank you.

    In your code, Please change this

    
get_avatar( $user_id, 90 );

    to

    
bp_core_fetch_avatar( array( 'item_id' => $user_id, 'type' => 'thumb' ) );

    It will use the site default then.

    Hope this helps.

    Regards
    Brajesh

  • Participant
    Level: Initiated
    Posts: 11
    Topy on February 18, 2018 at 11:19 am #13467

    Thanks, Brajesh. But it doesn’t work.

You must be logged in to reply to this topic.

This topic is: not resolved