Sep
2
(2008)
User Avatar Photos in WordPress
Filed under: work. Tags: avatar, plugin, ucalgaryblogs.ca, wordpress.
WordPress has supported Gravatars for awhile, which is great, but if you’re rolling out a site for a bunch of students to hammer on, it’s not ideal to have to send them to a third party service to set up photos. It’s awkward, and confusing, for new users to have to go somewhere else to add a photo to their profile. And profile photos can be very useful, especially at the beginning of a semester when everyone is just getting to know everyone else in a class, to put a face to a name.
So, for UCalgaryBlogs.ca, I just installed the handy User Photo plugin. Now, any site can enable this, and the users of that site will be able to add photos to their profiles, like this:
The plugin can be configured with custom sizes for the full-size and thumb versions of the avatar, and the avatar image can be deleted and/or replaced at any time.
It’s not completely trivial to enable – because the themes need to be User Photo aware. That’s pretty easy to add, though. For the cutline theme we’re using on a project, I edited a handful of files to add the code, and it works great. On index.php, and single.php, just add this wherever you want the blog author’s photo to be displayed on the post (I put it in the section displaying the post meta information):
<?php if (function_exists('userphoto_the_author_thumbnail')) { userphoto_the_author_thumbnail();}?>
Wrapping the thumbnail display code in a function_exists conditional means it will degrade nicely if the plugin is unavailable. Always a good thing to degrade instead of borking.
That results in this display when viewing the post:
Now, if you also want to show avatars on the comments, just edit comments.php to add this code (I put it in the comment meta info section):
<?php if (function_exists('userphoto_comment_author_thumbnail')) { userphoto_comment_author_thumbnail();}?>
And that will look like this when displayed on the blog:
If a user hasn’t added an avatar, it won’t display any image. But if they do have one, they’ll get the properly sized version of their avatar image displayed automatically. Easy peasy. It’s a bit awkward having to edit the themes, but it’s not difficult. The hard part will be remembering to re-apply the edits if the themes get updated (hence this post…)



Where did you get the avatar you’re using in this post?
I created it with faceyourmanga.com – it’s not entirely accurate, but as good as I could do with the options available…
Sorry guy but I’m not able to display the user photo in comments, I do not see where to put the code after activating the plugin.
Can I post you the comments.php template I have so you can help me?
Thanks for this tip
Hi,
I’ve got the plugin installed on my blog, wp version 2.6. I’m currently working on a page that displays a list of all my subscribers. I would like to show the photos of my subscribers in these results. the code I currently use, results in the photo of the author of the page being displayed for each subscriber. snippet of code below:
display_name; ?>
description; ?>
Am I using the code right? Any help would be greatly appreciated. Thanks in advance.
-Groq
good tip thanks a lot
Where exactely did you put the “userphoto_comment_author_thumbnail()” function?
I followed your instructions here, and they were most appreciated, but two problems:
1. When I add that code to the Index.php, it does not show up. At. All. I would like for the avatars to show up on the main page with each post. Maybe I’m missing something here?
2. When I add it to the single.php, it does show up. However, it shows up at the bottom of the post right before the comments. I have tried moving the code around in the single.php file and it doesn’t affect anything.
I don’t know, maybe it’s the theme I’m using, but I’m not getting above results that you’re getting. Please help!
I actually solved the problem another way: I found and installed the Post Avatar plug-in, which gives me exactly what I needed without having to edit code if I don’t want to. Thanks for the directions, though. If I decide to learn CSS more in-depth I’ll use it to make it work better.
I had better luck with the Post Avatar plugin as well, but I am also a total CSS newb too.