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.

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

resize Gravatar Image Size comment file

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.

resize Gvatar Image comment edit

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.

resize gravatar image CSS

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.

Resize gravatar image css 2

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

Resize gravatar image publish 2018

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!

You May Also Like

About the Author: WPC Staff

WPCrons staff has long-term experience of WordPress & like to constantly spot problems and plotting how to solve them. We believe you don't need to be a nerd or a programmer or a network engineer to make a difference.

Leave a Reply

Thanks for choosing to leave a reply. Your opinions and comments are very important to us, and your email address will NOT be published. If you need a private conversation then use our contact form. Please add an avatar if you do not have and make the comment section more beautiful.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Accept! No, thanks!

Why my browser don’t show me the coupon?

By default, Google Chrome and some other browser block pop-ups from automatically showing up on your screen. When a pop-up is blocked, the address bar will be marked Pop-up blocked Pop-up blocked.

ComputerAndroidiPhone & iPad

  1. On your computer, open Chrome.
  2. At the top right, click More More and then Settings.
  3. Under “Privacy and security,” click Site settings.
  4. Click Pop-ups and redirects.
  5. At the top, turn the setting to Allowed or Blocked.

  1. On your Android phone or tablet, open the Chrome app Chrome.
  2. To the right of the address bar, tap More More Settings.
  3. Tap Site settings and then Pop-ups and redirects.
  4. Turn Pop-ups and redirects on or off.

  1. On your iPhone or iPad, open the Chrome app Chrome.
  2. Tap More More and then Settings Settings.
  3. Tap Content Settings and then Block Pop-ups.
  4. Turn Block Pop-ups on or off.

Share via


Subscribe to get FREE updates

Join 1000s of readers around the globe. Don’t worry. We also don’t like Spam. We are weekly.


We are using affiliate links & images from respective product sites in our articles occasionally, means that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All the reviews & opinions (positive or negative) are 100% our own. We are not getting any money to write them. The trademarks mentioned in this website belong to the respective companies. All the articles are information purpose only, to help someone to educate & save money. In case any problem with the content, you can reach us anytime through our contact us page »