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:
- If there’s gravatar, you’ll display Gravatar
- 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
wp_update_user(), but how about changing lavatar1?
After digging some codes, this is how Simple Local Avatars works:
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.
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:
- Create a form which will have hidden input for
media_idand full url to the image
- For pleasing and easy to use UX, don’t ask user to copy paste image URL and media ID. Make use of
- Make some backend processing to save the media id and full url to the image into user meta with
Now you can leave the rest to Simple Local Avatars plugin to do the job.