Site logo

Archived topic

Gravatar Blurry on Desktop

1 reply · Started by Kevin Wabiszewski on July 21, 2021

Viewing posts 1–2 of 2

Hi there,

it looks ok to me :) But then my eyes are old lol.
First off the avatar image size being requested is 96px ( the default size ). And its currently being displayed at 45px.
So we have a couple of options:

1. Adjust the CSS for sizing the image from:

.single-post .entry-meta .meta-gravatar img {
    width: 45px;
    border-radius: 50%;
}

to:

.single-post .entry-meta .meta-gravatar img {
    width: 48px;
    border-radius: 50%;
}

This little adjustment means we have an even split of pixels ( 48 into 96 ) when its resized. This can improve the sharpness as we have no stray pixels to be cut away.

And/OR we can increase the size of the original avatar image.
Referring back to this topic, where we provided the code for the Post Meta:

https://generatepress.com/forums/topic/styling-gravitar-date-author/#post-819566

You will see this line, which makes the request for the Avatar image:

get_avatar( get_the_author_meta( 'ID' ) )

We can change it to this:

get_avatar( get_the_author_meta( 'ID' ), 135 )

The 135 is the size in pixels of the image to be loaded ( it defaults at 96px ) - by increasing that number you can request a higher resolution image. Note it does come at a cost of the image file size being slightly larger. But more pixels should improve quality and again; the size set here is best as an exact multiple of the width value in your CSS.

This archived topic is closed to new replies.