Integrating User Photo with Members List
Tuesday, August 25th 2009What WordPress does with avatars is already fairly cool—you have the option of allowing Gravatars as well as implementing randomly generated Wavatars, Identicons or MonsterIDs. The User Photo plugin lets users upload a photo of their choice via their Profile. If users don't upload a photo, we can have the avatar "fall back" to the user's gravatar, or, optionally, generate a random avatar according to WordPress' Discussion settings. This guarantees that users will always have avatars.
We want the cascade of fallbacks to work with Members List and in our Author template. We also need to make the plugin automatically approve new user photos (because, most likely, you don't want to manually approve every user's photo, and the plugin's option to turn this off doesn't work). So go download and install User Photo, and check off both "Serve Avatar as Fallback" and "Override Avatar with User Photo" in its settings. Then add the following code to your functions.php template (thanks to this forum post):
// auto approval in user photo plugin
add_action( 'profile_update' , 'auto_approve_photo' , 1000 );
function auto_approve_photo() {
global $current_user;
if ( defined( 'IS_PROFILE_PAGE' ) ) {
update_usermeta( $current_user->ID , 'userphoto_approvalstatus' , USERPHOTO_APPROVED );
}
}
All right, perfect—now users can add photos without our intervention. Next, we need to be able to call the plugin's main function without echoing it, so that we can make it play nicely with Members List. We'll need to add an extra parameter to the function to do this. Crack open user-photo.php in the plugin's folder:
Find line 285:
function userphoto($user, $before = '', $after = '', $attributes = array(), $default_src = ''){
And add a new "echo" parameter:
function userphoto($user, $before = '', $after = '', $attributes = array(), $default_src = '', $echo=TRUE) {
Find line 298:
echo userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);
Replace with this:
if ($echo == TRUE) {
echo userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);
} else {
return userphoto__get_userphoto($userid, USERPHOTO_FULL_SIZE, $before, $after, $attributes, $default_src);
}
Last but not least, you might want to make some of the GUI stuff more user friendly. Between lines 358 and 376, you'll find the error messages that get displayed to the user for various failed actions. In my version, I also cleaned up the markup involved, and removed the "full size" photo from displaying (since users tend to upload enormous photos).
Next, we need to stop the plugin from emailing us every time a user uploads a photo. Strangely, the plugin will still email us even though the photo is automatically approved:
Find line 449 and comment it out:
//@wp_mail($admin->user_email, "User Photo for " . $userdata->display_name . " Needs Approval", get_option("home") . "/wp-admin/user-edit.php?user_id=" . $userdata->ID . "#userphoto");
Great. Now all we need to do is fix the relevant portion of Members List so that it makes a call to User Photo.
Make Members List call User Photo
Open up "tern_wp_members.php" in the Members List plugin, and find line 799:
$s .= '<a class="tern_wp_member_gravatar" href="'.get_bloginfo('url').'/?author='.$u->ID.'">'."\n ".get_avatar($u->ID,60)."\n ".'</a>'."\n ";
And replace with the following:
$s .= '<a class="tern_wp_member_gravatar" href="'.get_bloginfo('url').'/?author='.$u->ID.'">';
if(userphoto_exists($u->ID)) {
$s .= userphoto($u, '','',array(),'',FALSE);
} else {
$s .= get_avatar($u->ID, 64);
}
$s .= '</a>';
Awesome. We gained both the conditionality that User Photo provides and Members List's highly customizable archive. I tend to prevent plugins from spewing their own stylesheets and scripts into the headers of my themes, so feel free at this point to remove Member List's CSS and apply your own. Search for ".css" in tern_wp_members.php to remove its default stylesheet.
If you would like to use my User Photo and Members list install, you can simply download user-photo.php and tern_wp_members.php.
At this point, you can go back to your Author archive template and display the user's photo/gravatar/identicon. In the definition list, add the following code:
echo "<dt>Photo</dt>";
if(userphoto_exists($curauth->ID)) {
echo "<dd>".userphoto($curauth)."</dd>";
} else {
echo "<dd>".get_avatar($curauth->ID, 64)."</dd>";
}
Next up, Adding Custom User Meta Fields to the WordPress Profile »
One problem with this: the alterations mean that the fullsize images are called instead of thumbnails for the members list. This looks very messy with all the thumbs being squashed unless square. Thumbnails are auto generated, would it be possible to change it to call them instead?
You should be able to call userphoto_thumbnail instead of userphoto in the above code.
Hi,
Althought the 'userphoto_thumbnail' code does display the thumbnails rather than the full size images, a problem happens:
The list of members thumbnail images are now displayed outside of the the #tern_members div, meaning they are positioned incorrectly.
I'm guessing that changing to display 'userphoto_thumbnail' means that the code becomes unreferenced somewhere so that it's not part of the correctly postioned loop?
Hope you can help.
Awesome Tips... Later I will try..
I'm having a problem with this. I can get the member list to work and the author page to work.
However I cannot get the userphoto section to work. The code provided above works to the extent where it shows the gravatar or default gravtar selected for the blog with the correct class as specified in the members list code, but it won't show the userphoto at all.
I've tried making the changes mentioned myself, which didn't work then i tried downloading the files and using them and it still won't work. I'm stumped as everything else is exactly as it should be and is working. Can you help? I'm using wordpress 2.8.4 and members list version 2.8.4 and userphoto version 0.9.4.
Any help would be appreciated
This tutorial was written when Members List 2.4 was out, 2.8.4 is a newer version and I don't know what the plugin author may have changed. To rule out your installation first, disable all other plugins and see if it works. Otherwise it may be the newer version or your implementation of the plugin.
Thanks for the prompt reply! I've disabled all plugins except user photo and members list and still only gravatars. I wonder if i should take the plugin back to version 2.4?
I have followed the instructions to the letter and am lost with no idea what to do
Try to apply the edits to 2.4 (or use my file), then post a link to your installation if possible.
You might also test this implementation on the Default theme to be sure it is not something in your theme that's affecting the plugin...
HI Daniel, thanks for getting back so quickly to me. I tried with the default install and v 2.8 and it didn't work. I tried with the default install and version 2.4 and it didn't work. I uploaded your code file as well and it made no difference. I'm totally stumped.
I can't post the url online. Cna i email it to you?
I discovered the problem. The code is doing as it supposed to, except the userphoto module isn't automatically approving the picutre, once i went into the user via the admin and approve the picture it all worked fine.
Will need to find a way to get the function code to work. Thanks for the suggestions
That's odd, did you add to your functions.php the fix from the tutorial to force approval of user photos?
// auto approval in user photo plugin add_action( 'profile_update' , 'auto_approve_photo' , 1000 ); function auto_approve_photo() { global $current_user; if ( defined( 'IS_PROFILE_PAGE' ) ) { update_usermeta( $current_user->ID , 'userphoto_approvalstatus' , USERPHOTO_APPROVED ); } }Hi Daniel,
I did yes, but it was still adding photos but with unapproved status. I added the code exactly as it is at the end of the other functions in my file. Its very odd. I took the other users solutions from that forum post you linked to as a temporary solution until i can get the problem sorted. I don't want to have to make that change everytime the module is updated
Strange, I would chalk it up to a borked file on my end if it hadn't worked for the other users who commented here. Did anyone else who followed this tutorial use the files I provided, or did you all start with plugins from the WP repository and modify them?
I'm having trouble adding this code to the definition list in the author template:
echo "Photo";if(userphoto_exists($curauth->ID)) {
echo "".userphoto($curauth)."";
} else {
echo "".get_avatar($curauth->ID, 64)."";
}
Do you have an example of exactly where to add it in the dl?
Sorry - my comment above didn't show the code brackets properly - obviously I'm total newbie here.
I copied and pasted your code into my author template file, where I thought it should go in the definition list, but the only output I get is a display of that code in my author page instead of the author photo.
Did you enclose the code in php brackets?
I ended up removing your recommended code above, and instead put the following code in the author template:
get_queried_object()) ?>
This fixed my problem of not getting the author photo to show. But is your code still necessary to fully integrate the user photo plugin with the author template for some other reason?
I'm using WP 2.9.2 with the Atahualpa theme; Members List 2.9.1, and User Photo 0.9.4.
Also FYI, in order to get the 'search by alpha' function to display in the members page, I had to revise the following in the members.php file:
old:
members(array('search'=>true,'pagination'=>true,'sort'=>true));
?>
new:
members(array('search'=>true,'alpha'=>true,'pagination'=>true,'sort'=>true));
?>
The code in question just displays the author photo in the author template if it exists, otherwise it displays the author's default gravatar.