3 ways to add author’s image in WordPress

Add author’s image in WordPress without a plugin

Aprile 5, 2017

WordPress uses Gravatar online service to show the picture of authors and users, this is why there isn’t a setting field to fill in with the image of the user, but you have to go to Gravatar site and upload a picture there.

Sometimes users don’t want to upload their avatar to Gravatar service, so you have to deal with users and authors without a profile picture. In this article we will try to use also an avatar generator to deal with missing profile pictures.

So here are 3 possible workarounds to change user avatar in WordPress:

Add an image in media library and use that image with get_avatar

You can add an image in media library, add a field in the edit user page to receive the address of the picture uploaded and hook the get_avatar function to use that new user field for the image. If the image hasn’t been uploaded fall back on normal get_avatar function. You can do all these things by adding this piece of code to your functions.php file:

add_filter( 'get_avatar','get_local_avatar' , 10, 5 );

function get_local_avatar($avatar, $author, $size, $default, $alt) {
  // ------------------------------------
  // handle user passed by email or by id
  if(stristr($author,"@")) $autore = get_user_by('email', $author);
    else $autore = get_user_by('ID', $author);

  $url = get_the_author_meta( 'userpicprofile', $autore->ID);
  if($url) {
    return "<img class='avatar' alt=\"".$alt."\" src='".$url."' width='".$size."' />";
  } else {
    return $avatar;
  }
}
// --------------------------------------
// add the field in your user edit profile page
function add_author_image( $contactmethods ) {
  $contactmethods['userpicprofile'] = 'URL for profile image';
  return $contactmethods;
}
add_filter('user_contactmethods','add_author_image',10,1);

Modify the get_avatar method to use another automatic generated avatar from Flathash

Flathash is a nice free service that provides flat avatars generated with an algorithm. They are always different if you send a different parameter string to generate the avatar. So you can use the WordPress user name to generate a different avatar for each user. Here is the code to add in your functions.php file to generate fresh new avatars for your users:

add_filter( 'get_avatar','get_flathash_avatar' , 10, 5 );
function get_flathash_avatar($avatar, $author, $size, $default, $alt) {
  // -------------------------------------------
  // handle user passed by email or by id or comment obj
  if(isset($author->comment_ID)){
    $code = $author->comment_author_email;
  } else {
    if(stristr($author,"@")) $code = $autore;
      else {
        $autore = get_user_by('ID', $author);
        $code =$autore->user_email;
      }
  }

  // use flathash avatar instead of gravatar
  $avatar = "http://flathash.com/". md5($code);

  return "<img class='avatar' alt=\"".$alt."\" src='".$avatar."' width='".$size."' />";
}

Create a dedicated dir in wp-content to store the authors’ images

You can create a new folder in your /wp-content dir, so you have /wp-content/authors/ folder.
You can put in this directory all the images of your authors, named with the user nice name, so, if you have a user named “barack obama” and its author url is http://www.yoursite.com/author/barack-obama, then the nice name is barack-obama, and its jpg file will be barack-obama.jpg.

You can then add this code to your functions.php to modify the get_avatar method to first search the author image file from your new wp-content authors directory and use Gravatar service only if you can’t find the image in the local content folder:

add_filter( 'get_avatar','get_content_avatar' , 10, 5 );
function get_content_avatar( $avatar, $author, $size, $default, $alt) {
  // ------------------------------------
  // handle user passed by email or by id
  if(stristr($author,"@")) $autore = get_user_by('email', $author);
    else $autore = get_user_by('ID', $author);

  // use file with author nice name jpg in /wp-content/authors/ folder
  if(isset($autore->user_nicename) && file_exists(WP_CONTENT_DIR . '/authors/'.$autore->user_nicename.".jpg")) {

    $avatar = content_url() . '/authors/'.$autore->user_nicename.".jpg";
  } else {
    return $avatar;
  }
}

It’s also possible to make a mix of these methods, for example, use a local folder to search for user pics and, if not found, use the Flathash generated avatar instead of the Gravatar one.

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.