Recently one of our readers asked us if it is possible to change the size of the Gravatar image. The answer is yes. In this tutorial, we are going to show you how to change the Gravatar image size on WordPress.
Gravatar is a globally recognized avatar that links a user's email address to an image. Popular apps like WordPress and others use it to display user's photo on a site.
Most WordPress themes by default add a Gravatar next to each user comment. Some even use it for the author bio.
Let's take a look at how you can change the Gravatar image size on your WordPress site.
Note: As the size of the Gravatar image is defined by your theme, you must modify the files of your theme to change it.
How to change the size of Gravatar for WordPress comments
The first thing you need to do is open the comments.php file located in your theme folder.
You would need to login to your Website using an FTP client and then accessing your theme directory, following a path similar to this: " / Wp-content / themes / yourtheme / ».
Alternatively, if your provideraccommodation offers a file manager, you can edit this file using the web interface in your cPanel.
In the comments.php file, you must find the following code: avatar_size »
It will be inside the " wp_list_comments " like this:
'ol', 'short_ping' => true, 'avatar_size' => 32,)); ?>
Just change the size for the dimensions you want. Gravatars are square, so the value set will be the same for width and height.
Go ahead and save your changes. If you are using an FTP client then you will need to upload your file to the server. Now open an article that has comments to see if your changes have taken effect.
If not, then probably your theme's CSS is the cause. The best way to check this is to use the " Inspect element ».
Just right click on your browser's Gravatar and click Inspect Item.
You need to look at the height and width of the Gravatar image to see if it matches the image you defined.
When you hover over it, it will also highlight the actual Gravatar dimensions and the dimensions defined in its attributes.
You will notice that the two are different. This means that your theme's style.css file is responsible for the default image size. Many themes including the default theme Twenty Sixteen uses CSS to change the size of the images.
You need to open the style.css file in your theme folder and search for avatar. You will probably find a CSS class: “.how-author .avatar Which contains a code like this:
.comment-author .avatar {height: 42px; position: relative; top: 0.25em; width: 42px; }
Go ahead and change the width and height to match the value previously set in the comments.php file.
That's all. You have successfully changed the size of the avatar " gravate In your WordPress comments.
Now you might be wondering, if it is possible to override image size using css then why do it in comments.php file?
There are two advantages to doing this with this method:
1 - No blurry images
If you want to resize the Gravatar that WordPress offers and make it bigger, doing it by CSS will make this image blurry.
2- Faster loading times
Now, if you want to set a smaller image size than the default one, for the sake of optimization, using CSS code to make the image small will not optimize the loading of the image.
However by changing the size of the images to " comments.php You can make the image smaller, which can optimize the loading of images.
That's all for this tutorial, feel free to share this tutorial with your friends on your favorite social networks.
