User Avatar Photos in 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…)

18 thoughts on “User Avatar Photos in WordPress”

  1. 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?

  2. 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

  3. 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!

  4. 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.

  5. Hi, me too i am not getting the plugin to work in the comment section. Where to insert the code? Here my coment php:

        This post is password protected. Enter the password to view comments.
    
         to &#8220;&#8221;
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    comment_status) : ?&gt;
        <!-- If comments are open, but there are no comments. -->
    
    
        <!-- If comments are closed. -->
        Comments are closed.
    

    comment_status) : ?>

    You must be &lt;a href=&quot;/wp-login.php?redirect_to="&gt;logged in to post a comment.
    
    
    &lt;form action=&quot;/wp-comments-post.php" method="post" id="commentform" class="commentform"&gt;
    
    
    
    Logged in as &lt;a href=&quot;/wp-admin/profile.php"&gt;. &lt;a href=&quot;" title="Log out of this account"&gt;Log out
    
    
    
    &lt;input class=&quot;text&quot; type=&quot;text&quot; name=&quot;author&quot; id=&quot;author&quot; value=&quot;" size="22" tabindex="1"  /&gt;
    Name 
    
    &lt;input class=&quot;text&quot; type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; value=&quot;" size="22" tabindex="2"  /&gt;
    Mail (will not be published) 
    
    &lt;input class=&quot;text&quot; type=&quot;text&quot; name=&quot;url&quot; id=&quot;url&quot; value=&quot;" size="22" tabindex="3" /&gt;
    Website
    
    
    
    &lt;!--<strong>XHTML:</strong> You can use these tags: <code></code>--&gt;
    
    
    &lt;input name=&quot;submit&quot; type=&quot;image&quot; src=&quot;/images/submit.gif" id="submit" tabindex="5" value="Submit" /&gt;
    
    
    ID); ?&gt;
    
  6. Hello,

    I was wondering if you know how to do a mass upload for my entire company? I have done this but when I go to my profile page it is as if I did not. I still need to go in and find the photos that were uploaded. I even named them by nicename, so it is bbob.jpg.

    I hope you can help me

    Aaron

Comments are closed.


The spammers win. I've disabled comments. Again. It's just not worth having to deworm my site from the inane autospam jabber that trickles through the spam filters. Sorry. I can be contacted via the Contact form here on the site, or out on the internets.

BUT I WANT TO POST A COMMENT HERE. WITNESS THE OPPRESSION INHERENT IN THE SYSTEM.

If you need to post a response, trackbacks are enabled and will be displayed normally.

The Trackback URL for this post is:
http://darcynorman.net/2008/09/02/user-avatar-photos-in-wordpress/trackback/