How to Change the Gravatar Image Size in WordPress – WPSaviour

By WP Saviour •  Updated: 02/27/21 •  5 min read

Not too long ago one among our readers requested whether it is attainable to alter the Gravatar picture dimension. The reply is sure. On this article, we’ll present you the right way to change the Gravatar picture dimension in WordPress.

changewpgravatarsize-6901512

Gravatar is a globally acknowledged avatar that connects a consumer’s e mail deal with with their image. Standard functions like WordPress and others use it to show consumer’s photograph on the web site.

Most WordPress themes by default add a Gravatar subsequent to every consumer remark. Some even use it for the writer bio field.

Let’s check out how one can change the Gravatar picture dimension in your WordPress web site.

Word: Since Gravatar Picture dimension is outlined by your theme, you would want to edit your theme recordsdata to alter it.

Video Tutorial

Subscribe to WPBeginner

If you happen to don’t just like the video or want extra directions, then proceed studying.

Change Gravatar dimension for WordPress Feedback

The very first thing that you must do is open the feedback.php file situated in your themes folder.

You would want to hook up with your web site utilizing FTP after which go to /wp-content/themes/yourtheme/.

Alternatively in case your WordPress internet hosting firm gives a File Supervisor, then you possibly can edit this file utilizing the net interface in your cPanel.

Within the feedback.php file, that you must discover the next code: avatar_size

Will probably be contained in the wp_list_comments perform like this:

1

2

3

4

5

6

7

Merely change the dimensions to no matter dimensions you want. Gravatars are sq., so the worth you set would be the similar for each width and top.

Go forward and save your adjustments. If you’re utilizing FTP, then add the adjustments to your server.

Now open a submit that has feedback to see in case your adjustments are stay.

If it’s not, then your theme’s CSS is overriding it. One of the simplest ways to verify is to make use of Examine Components device in your browser.

Merely proper click on on the Gravatar in your browser and click on Examine Factor.

inspectelementcomments-2313549

You must take a look at the peak and width of the Gravatar picture to see if it displays the worth that you just set.

While you deliver your mouse over it, it should additionally spotlight the gravatar on the picture and present you the dimensions it’s really displaying.

gravatarimagesize-1593620

You’ll discover that the 2 are totally different. Because of this your theme’s type.css file is overriding the default picture dimension. Many themes together with the default Twenty Sixteen theme use CSS to regulate the Gravatar picture dimension for various display screen sizes.

You must open the type.css file in your theme’s folder and seek for avatar. You’ll possible discover a CSS class: .comment-author .avatar which include a code like this:

1

2

3

4

5

6

.comment-author .avatar {

    top: 42px;

    place: relative;

    high: 0.25em;

    width: 42px;

}

Go forward and alter the width and top to match the worth you set earlier within the feedback.php file.

That’s all. You have got efficiently modified the gravatar picture dimension in your WordPress feedback.

Now you could be questioning for those who can override the picture dimension utilizing CSS, then why did we alter the avatar_size within the feedback.php file?

Sure, whilst you can take the CSS shortcut, there are two advantages to doing it this manner:

1. No blurry pictures

If you happen to wished to resize the WordPress Gravatar and make it bigger then the default picture dimension, then it should look blurry.

2. Sooner Load Occasions

Now for those who wished to make the Gravatar smaller then the default picture dimension, then the CSS solely technique will look simply superb.

Nonetheless by altering the dimensions in feedback.php, you’re precise picture is smaller thus decreasing the web page dimension and bettering your web site velocity.

Change Gravatar dimension for Writer Bio

Relying on the theme that you just use, it could additionally use Gravatar for writer bio packing containers. You may change the default gravatar dimension in a really comparable manner as feedback.

You must find the theme file which provides the bio. It might be within the single.php file, features.php file, and even as a separate template half file. The default Twenty Sixteen theme makes use of the template half file known as biography.php.

When looking out the recordsdata, that you must search for the code get_avatar.

For the sake of this instance, we’ll use TwentySixteen default theme for instance. Within the themes folder:

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

It reads like this:

1

2

3

$author_bio_avatar_size = apply_filters( 'twentysixteen_author_bio_avatar_size', 32 );

echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );

You’ll simply have to alter the quantity 32 to no matter you want.

In different themes, the code could seem like this:

1

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

After you modify the dimensions, refresh the web page to see if the dimensions up to date. If not, then you definitely’d must seek for the avatar class within the type.css file like we confirmed for feedback, and replace the dimensions there as properly.

We hope this text helped you modify the gravatar dimension in WordPress. You might also need to see our information on 25 commonest WordPress errors and the right way to repair them.

gp-8382680 as-4921021

WP Saviour

I am a WordPress specialist. My mission is to help you create beautiful websites with ease!