One of our readers recently inquired about changing the Gravatar image size. Yes, that is correct. We’ll show you how to change the Gravatar image size in WordPress in this article.

Gravatar is a well-known avatar that combines a user’s email address with their image. It is used by popular applications such as WordPress and others to display a user’s photo on a website.

By default, most WordPress themes place a Gravatar next to each user comment. It’s even been used for the author bio box in some cases.

Let’s look at how to change the size of your Gravatar image on your WordPress site.

Note: If you want to change the size of your Gravatar Image, you’ll need to edit your theme files.

Change the size of your Gravatar for WordPress Comments

The very first step is to set up the comments.php file in your themes folder.

You’ll need to use FTP to connect to your website and then navigate to /wp-content/themes/yourtheme/.

Alternatively, if your WordPress hosting company provides a File Manager, you can edit this file through your cPanel’s web interface.

You must locate the following code in the comments.php file: avatar size

It’ll be like this inside the wp list comments function:

  1. <?php
  2. wp_list_comments( array(
  3. 'style'       => 'ol',
  4. 'short_ping'  => true,
  5. 'avatar_size' => 32,
  6. ) );
  7. ?>

Simply alter the dimensions to suit your needs. Because Gravatars are square, the width and height values you specify will be the same.

Save your modifications now. Upload the changes to your server via FTP if you’re using that method.

Check if your changes are live by opening a post with comments.

If it isn’t, it’s because the CSS in your theme overrides it. The tool Inspect Elements in your browser is the best way to check.

Simply select Inspect Element from the context menu of the Gravatar in your browser.

You should check the Gravatar image’s height and width to see if the value you entered is reflected.

When you move your mouse over it, it will highlight the gravatar on the image and show you the actual size it is displaying.

You’ll notice that they’re not the same. This indicates that the style of your theme. The default image size is overridden by the css file. CSS is used by many themes, including the Twenty Sixteen default theme, to control the size of the Gravatar image for different screen sizes.

You should look for avatar in the style.css file in your theme’s folder. You’ll most likely come across the CSS classes.comment-author.avatar, which contain the following code:

  1. .comment-author .avatar {
  2. height: 42px;
  3. position: relative;
  4.  top: 0.25em;
  5. width: 42px;
  6. }

Change the width and height to the values you specified in the comments.php file earlier.

That is all there is to it. In your WordPress comments, you’ve successfully changed the gravatar image size.

You might be wondering why we changed the avatar size in the comments.php file if you can override the image size with CSS.

Yes, you can use CSS to save time, but there are two advantages to doing it this way:

1. No images that are smudged

It will appear blurry if you resize the WordPress Gravatar to a larger size than the default image size.

2. Quicker loading times

Now, if you really want to create the Gravatar smaller than that of the default image size, you can also use the CSS only method.

However, by altering the size in comments.php, the actual image is smaller, resulting in a smaller page size and faster site.

Change the size of the Gravatar for the Author Bio.

Gravatar may be used for author bio boxes depending on the theme you’re using. You can change the default gravatar size in the same way that you can change the size of comments.

You must find the theme file that contains the bio. It could be in single.php, functions.php, or a separate template part file. The biography.php template part is used by default in the Twenty Sixteen theme.

Look for the code get avatar in the files when searching.

We’ll use the TwentySixteen default theme as an example in this tutorial. The following themes can be found in the themes folder:

/wp-content/themes/twentysixteen/template-parts/biography.php is a file.

This is how it goes:

  1. $author_bio_avatar_size = apply_filters( 'twentysixteen_author_bio_avatar_size', 32 );
  3. echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );

All you have to do now is change the number 32 to whatever you want.

The code for other themes might look like this:

  1. get_avatar( get_the_author_meta( 'user_email' ), 32);

Refresh the page after changing the size to see if the size has changed. If not, you’ll need to look in the style for the avatar class. css file, just like we did for comments, and change the size there, too.

We hope you found this article useful in adjusting the gravatar size in WordPress.

If you liked this post, please find and follow us on Instagram, Twitter and Facebook.

Beginners Guide