What is Gravatar?
Gravatar stands for Globally Recognized Avatar. It is a small picture that appears on the comments, author bio, forum posting and many other places on a WordPress site. Gravatar is a free service offered by Automattic Inc, the company that runs WordPress.com and supports the open source projects like WordPress.org.
The gravatar image displayed is nothing but the profile image linked to the email id of a WordPress.com user account. This means you should have a WordPress.com account in order to use gravatar for your email id. The gravatar image is displayed on all services use gravatar API that is free to use. Below is an example of gravatar image displayed besides the author information. The look, size, color can be adjusted with custom CSS which is generally controlled inside your theme or plugin.
Gravatar on Author Bio
How to Create Gravatar?
The first step is to have a WordPress.com account. You should already have an account if you are using Jetpack or any other plugins associated with WordPress.com. If you don’t have one then go to WordPress.com site and create an account.
Login to gravatar.com with your WordPress.com account details. Navigate to “Add an image” option available under the dropdown of your name.
Adding Gravatar Image
Upload the image, crop to the needed size, choose the rating and finally assign your email id to the image. You can have multiple emails under the same account and add different gravatar images for each email ids.
How to Use Gravatar on WordPress.org Site?
Login to WordPress admin panel and navigate to “Settings > Discussion” menu. Activate the “Show Avatars” checkbox under “Avatar Display” section.
Using Gravatar on WordPress
Choose the rating of your avatar image, WordPress offer the following ratings for the image:
- G – Simple image suitable for all age of audiences
- PG – Offensive image suitable for age 13 and above
- R – Adult image for age 17 and above
- X – More violent and adult image above R rating
You can also choose one of the default available images. This image will be displayed when the user email is not associated with any gravatar image.
Gravatar Hovercard
By default only the image will be displayed when an associated email with gravatar account is used. In addition to this you can optionally showcase the linked profile on hover as shown below.
Gravatar Hovercard
Install and activate Jetpack plugin. Navigate to “Jetpack > Settings” menu and look for the module called “Gravatar Hovercards”. Activate this module for showing gravatar profile when hovering over the gravatar image.
Jetpack Gravatar Hovercards
How Gravatar Works?
The email id used on the gravatar account is converted to a string referred as hash. Let us take an example of an email id “[email protected]” registered with gravatar site. This email is converted to a hash value, say “abcd”. Now you can get the gravatar picture just by using HTTP GET requests with an IMG tag as below:
<img src=”https://www.gravatar.com/avatar/abcd?s=250″ />
In the above code:
- “abcd” is the calculated hash value
- The corresponding email id is “[email protected]”.
- S=250 is used to resize the picture to 250px size.
When gravatar is enabled on your WordPress.org site, the platform will use the above method to fetch gravatar image related to an email id.
Problems in using Gravatar
Though the image looks attractive and used by almost all of the commenting plugins available on WordPress.org, there are points to be considered before you activate gravatar.
- Gravatar API does not have any authorization, which means anyone knows your email id can enter comments and your picture will be displayed without your permission.
- Generally gravatar images are not cached which will lead to slow page loading. You can see this problem when using Google PageSpeed Insights tool under “Leverage browser caching” section.
- Services from WordPress.com is blocked in some of the countries, hence the small image can take long time and delay the page loading considerably, especially when the page has hundreds of comments.
Waiting for Gravatar Image
- Displaying gravatar on mobile devices will make your comments more congesting and non-readable. You can use custom CSS media queries and hide the gravatar images on mobile devices.
How to Use Custom Gravatar Image?
You want to show the avatar image but not interested using the one from gravatar.com or don’t want to create wordpress.com account. In such case, install and activate WP User Avatar plugin. This plugin allows users to upload custom image as avatar. You can disable the default gravatar and use custom user uploaded image for showing on the site.
Using Custom Avatar in WordPress
Leave a Reply
Your email is safe with us.