How To Resize Gravatar Image In WordPress

Is your Gravatar image is looking blurry and small? Then you just need to resize Gravatar image before it leaves a bad impression on your users.

Hi Guys, I am Iqbal. In this article, I will show you how to resize Gravatar image in WordPress.

What is a Gravatar?

When browsing different websites, you will notice that a lot of users have an image next to their name. Mainly, in the comments section. These photos square measure images known as “avatars.” But WordPress uses a particular form of avatar known as “Gravatars”–short for “Globally Recognized Avatar.” not like normal avatars, Gravatars follow you round the internet technology. That means, you just need to upload your image only one time and if you comment on other WordPress powered website it will automatically display your image there.

Why do you need to resize Gravatar image?

By default, in most of the wordpress themes, Gravatar image size is 32 x 32 (in pixels). But the theme calls it with CSS value of 48px. This is the reason why your Gravatar looks blurry. Any image will become blurry if you display it in a size which is more bigger then the actual size of the image.

Steps to resize Gravatar image –

The first thing you need to do is open the comments.php file which is located in your themes folder.  You can your cPanel or FTP to edit it. You will find it here:
public_html » wp-content » themes » your theme » comments.php

Open it and navigate to class=” comment-list” section and add ‘avatar_size’ => 60, as shown in the image below. If it already present then you just need to change the dimension to 60.

Go ahead and save changes. Now you need to edit your CSS so that browsers can display Gravatar in 60px, not in 48px

Now open a post that has comments. Then right-click on the Gravatar in your browser and click Inspect Element.

It is still showing 32×32 because of our browser cache. Now copy the CSS rule i.e. .comment-author .avatar  and replace width to 60px. Then store it in your text editor.  You will need it later.

Optional: Again select class=”comment-author vacrd” and replace the padding-left to 75px. So that it looks beautifull.

Finally, copy the two CSS rules and paste in your additional CSS section, To do this navigate to your wordpress dashboard and Goto Appearance » Customize » Additional CSS

And, click on publish to make changes. Finally, you need to clear the cache using your caching plugin.

Hope this article helped you to resize gravatar image on your WordPress.

If you liked this article, then please follow us on social media and don’t forget to Subscribe to our mail list. That’s all in this article. Peace!