How to include User Avatar Image in Leaderboard Widget sidebar?

Hey Autowakins!

Excellent question!
Step 1. Copy and paste the following code into your themes functions.php file:

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )
{
	return str_replace( '%avatar%', get_avatar( $row['user_id'], 32 ), $layout );
}

Step 2. Change the default value of 32 in the code above to a size that suits you. For more info see the codex entry for the get_avatar() function.

Step 3. Add the new %avatar% shortcode in the “Row layout” field in your myCRED List widget.

Done.

Epic plugin, epic response and an even more epic author!

SHank you vewy vewy much! I’ll go give it a go…

Any chance of us customizing the avatar to our tastes; say we wanted them round with borders, white padded edges etc. ??

Glad to hear your satisfaction.
You can apply CSS styling to the avatar image.

You can target the above codes output though:
.myCRED-leaderboard li img { }

A few examples of CSS styling:

Example 1: Round corners using border-radius. (using the default 32px size).
.myCRED-leaderboard li img { border-radius: 16px; }
Makes the image round. Your value should be half of the avatars size.

Example 2: Apply margins to the avatar image.
.myCRED-leaderboard li img { margin: 0 12px 12px 0; }
Applies margins to the right and bottom of image.

Great! Thanks again for that.

Here’s are two more things I’d like to know that I think maybe a little bit complicated but would be fantastic if it were possible with this plugin.

First One:
How can I put an icon/badge alongside users’ avatars to represent their different levels? To further explain what I mean in the simplest possible form:

Assuming all users can only progress through three(3) levels within the site (as they earn points); level 1 (beginner), level 2 (skilled) & level 3 (master). I’d like to have a unique icon that can be shown alongside users’ avatars that represent their current levels e.g beginner with a wooden hat, skilled with a metal hat & master with a golden hat. How can I do this?

Second One:
I’d like all users to be able to rate something on my site. However, I want their ratings to all be different based on a formular that references their current levels.

Ok, let’s use the three(3) levels mentioned above as an example again. Assuming the formular is something like this:

Anyone's rating x user's level = actual rating

e.g a beginner (level 1) rates a picture with 8.5 stars. Hence the actual rating becomes 8.5 x 1 = 8.5stars

If a higher level user, say skilled (level 2), rates the same picture with even 6 stars, then this skilled user’s rating would amount to
6 x 2 = 12stars, which is better for the picture considering a higher levelled member voted. And so on like that…

I just want to create a system where quality is prefered over quantity.

Thanks again.

W.

Hey. Using the same filter as before you could do something like this:

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )
{
	// Step 1. Prep
	$user_id = $row['user_id'];
	$balance = $row['creds'];

	// If balance is 1000 or higher use level 3 image
	if ( $balance >= 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level3.png';
	// If balance is 100 or higher but less then 1000 use level 2 image
	elseif ( $balance >= 100 && $balance < 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level2.png';
	// All else use level 1
	else
		$icon = get_stylesheet_directory_uri() . '/images/level1.png';

	// Add icon before the layout
	return '<img src="' . $icon . '" alt="" /> ' . $layout;
}

In this example you require 3 images called level1.png, level2.png and level3.png which is in your themes image directory (or child theme if you use one). The icon is appended before the layout.

You could add any type of logic in this function.

Your second request depends on what exactly you want to be rated. Maybe a rating plugin would suit your needs better then myCRED.

Thanks a bunch!!!

I’ll go try it out.

Hi,

One last layer of complexity I’m struggling with on this code you wrote (which allows me to add additional images to the avatars of users based on their levels):

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )

{
	// Step 1. Prep
	$user_id = $row['user_id'];
	$balance = $row['creds'];

	// If balance is 1000 or higher use level 3 image
	if ( $balance >= 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level3.png';
	// If balance is 100 or higher but less then 1000 use level 2 image
	elseif ( $balance >= 100 && $balance < 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level2.png';
	// All else use level 1
	else
		$icon = get_stylesheet_directory_uri() . '/images/level1.png';

	// Add icon before the layout
	return '<img src="' . $icon . '" alt="" /> ' . $layout;
}

How can I add different images to these users’ avatars also based on their genders AND levels? The one above is for levels only, but I’d like to have ladies and guys icon images differ a little.

Thanks in advance.

W.

Hey autowakins.

You would need to add to your users profiles the option for them to nominate their gender and save this information. Or if you have this already, you just need to know under what meta key this information is stored and access it with the get_user_meta() function.

If you are unsure on how to do this you can find tons of great tutorials on how to add custom fields to a users profile.

Hi,

Yes, I already have the gender field added, so let’s assume I know where the meta key information is stored, how do I incorporate the get_user_meta()function?

Is it anything like what’s written below:

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )

{
	// Step 1. Prep
	$user_id = $row['user_id'];
	$balance = $row['creds'];

	// If balance is 1000 or higher with gender female use level 3 female image
	if ( $balance >= 1000 && gender = female)
		$icon = get_stylesheet_directory_uri() . '/images/level-3-female.png';

// If balance is 1000 or higher with gender male use level 3 male image
	if ( $balance >= 1000 && gender = male)
		$icon = get_stylesheet_directory_uri() . '/images/level-3-male.png';

	// If balance is 100 or higher but less then 1000 with gender female use level 2 female image
	elseif ( $balance >= 100 && $balance < 1000 && gender = female)
		$icon = get_stylesheet_directory_uri() . '/images/level-2-female.png';

	// All else with gender female use level 1 female
	else
		$icon = get_stylesheet_directory_uri() . '/images/level-1-female.png';

// All else with gender male use level 1 male image
	else
		$icon = get_stylesheet_directory_uri() . '/images/level-1-male.png';

	// Add icon before the layout
	return '<img src="' . $icon . '" alt="" /> ' . $layout;
}

I think I get the logic, I just don’t know how to speak the php language (even if my life depended on it). Please check the above code and let me know how far away I am to crashing the entire php coding system ??

There is a simpler way to do this.

First we need to know the meta key the information is stored.
We then access this though: $gender = get_user_meta( $user_id, 'the_gender_id', true );

Now I assume that the value that this meta key holds is either “male” or “female”. So we append the $gender variable to the address string. So you need the following images:

level-1-male.png
level-1-female.png
level-2-male.png
level-2-female.png
level-3-male.png
level-3-female.png

Here is the code:

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )
{
	// Step 1. Prep
	$user_id = $row['user_id'];
	$balance = $row['creds'];
	// Replace the_gender_id with the actual id
	$gender = get_user_meta( $user_id, 'the_gender_id', true );

	// If balance is 1000 or higher
	if ( $balance >= 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level-3-' . $gender . '.png';

	// If balance is 100 or higher but less then 1000
	elseif ( $balance >= 100 && $balance < 1000 )
		$icon = get_stylesheet_directory_uri() . '/images/level-2-' . $gender . '.png';

	// All else
	else
		$icon = get_stylesheet_directory_uri() . '/images/level-1-' . $gender . '.png';

	// Add icon before the layout
	return '<img src="' . $icon . '" alt="" /> ' . $layout;
}

P.S. In PHP, variables always start with a dollar sign. just writing gender or female will cause a PHP error since PHP has no idea what these things are (think of it as PHP needs everything explained).

For those having issues with the avatar not showing, please note that the user_id variable has changed to ID.

add_filter( 'mycred_ranking_row', 'my_custom_ranking_rows', 10, 4 );
function my_custom_ranking_rows( $layout, $template, $row, $position )
{
	$avatar = get_avatar( $row['ID'], 32 );
	return str_replace( '%avatar%', $avatar, $layout );
}

How might this call a user’s gravatar versus an avatar? Or, if the user has a gravatar call it first and if not go to the default avatar?

Update: I guess that change to ID enables gravatars to work. Thanks!

Hey Scotm

That is correct. I made a mistake in the original script that caused the avatars not to load but the last version posted here works.