Custom Avatars Instead of Gravatars in WordPress

Share on facebook
Share on twitter
Share on pinterest

We generally dislike Gravatars in WordPress (Globally Recognized Avatars). Even though it’s an excellent idea for comments, we didn’t want to use our low-res raster Gravatars on the site. In this article, I share why and what we did about this minor issue. Since our site emphasizes the use of SVG throughout the site, the custom avatars are no exception!

Custom SVG avatars through the free WP User Avatars plugin!

First and foremost, Denes drew us these beautifulĀ avatars, based on our just as pretty faces. šŸ¤£ We then discovered that the Gravatar service doesn’t like SVG uploads. That promptly caused us to look for a solution, and we found a plugin that lets us set custom avatars.

We choseĀ WP User Avatars by John James Jacoby. Maybe it doesn’t look like the fanciest of these plugins, but it indeed is small and fast. We tried other ones, and they were either unnecessarily complicated or didn’t work well with Elementor. We use our avatars extensively in the Post Cards of the front page, related posts, and theĀ archives. You can also see them at the top of the single post layout, next to the author bio, and of course in the comments. We wanted something that “just works” (everywhere), and without all the bells and whistles. For that purpose, this plugin is perfect. It never gets in the way and has no problem with SVG uploads.

Custom avatar selection in WordPress

We could still have a JPG version of our avatars in the Gravatar system so others could recognize us on other sites where we comment. However, we wanted to go the extra mile and ensure our custom avatars are retina ready. What better way to make an illustration retina ready than to make it vector in the first place?

Yet there are Gravatars in the comments?!

Our comments section is AJAXified to prevent all those small web requests for Gravatars of each commenter. On a busy article that could meanĀ dozens of further requests during page load, and we wanted to avoid that. Now, the browser is only reaching out to the Gravatar server when you load the comments. We didn’t want to prevent avatars altogether, as they bring life to the comment section.

We built the comments to treat us a bit differently because of the custom SVG avatars required different margins. It also marks our comments with some extra design so visitors who skim that area will find our comments easily. Do you like how we handle avatars? Share your opinion in the comments below, using your Gravatar! šŸ™‚

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Join Our Newsletter!

Get secret tips and valuable details about making your site more successful.

Follow Us!

We Recommend

This site is powered by Elementor

100% FreeĀ ā€¢ WP Website BuilderĀ ā€¢Ā All-in-One Solution

Monthly Archives