Asking your non-techie visitor to create an account on your WordPress site then asking them again to sign up for Gravatar to display avatar doesn’t feel like a good UX to me. This is one of those time when you want to have a local avatar system. It’d be even better if you can have both of em:

  1. If there’s gravatar, you’ll display Gravatar
  2. But user can also go to profile page and upload his/her own avatar.

For this exact reason, Simple Local Avatars (authored by Jake Goldman, 10up, and thinkoomph) exists. I’ve been using Simple Local Avatars on Hijapedia for months but our recent mobile first iteration suggests us to move the profile editing to the front end of the page. It’s easy to manipulate user and user data using update_user_meta() and wp_update_user(), but how about changing lavatar1?

After digging some codes, this is how Simple Local Avatars works:

Data Storing

The avatar data is stored on user meta using 'simple_local_avatar' key. It is stored as array using following structure:

array( 'media_id' => your_media_id, 'full' => url_to_full_size_image, 'avatar_size' => url_to_avatar_size );

Hence, you can get and store the data using get_user_meta( $user_id, 'simple_local_avatar', true ); and get_user_data( $user_id, 'simple_local_avatar', $array_data );

Serving Gravatar or Avatar

The handiness of Simple Local Avatars lies on how it is used: instead of providing new template tags, Simple Local Avatars manipulates the standard get_avatar() function using get_avatar filter so basically you don’t have to change any code on your theme for it to work. Simply install the plugin, and you’re good to go.

When get_avatar() is called, Simple Local Avatar’s filter will look for intended size of the local avatar2 from get_user_meta( $user_id, 'simple_local_avatar', true )‘s array key. If there’s no avatar with intended size, simple local avatar will resize the the gravatar based on the full size image of avatar and save it on the user_meta so it won’t be generated each time the get_avatar() is called.

Tweaking Simple Local Avatars For Front End Editing Usage

Based on the explanation above, the path to tweaking simple local avatars for your own use becomes quite clear:

  1. Create a form which will have hidden input for media_id and full url to the image
  2. For pleasing and easy to use UX, don’t ask user to copy paste image URL and media ID. Make use of wp_enqueue_media() to use WordPress native media uploader. Do some javascript to insert the image url and media id to the hidden inputs that have been described on point no.1
  3. Make some backend processing to save the media id and full url to the image into user meta with 'simple_local_avatar' key.

Now you can leave the rest to Simple Local Avatars plugin to do the job.

  1. Local Avatar powered by Simple Local Avatars. I just made that one up 

  2. Assuming that user has upload local avatar 

Share Your Thought