How can I change Gravatar size?

Hi there. Glad you like the plugin.

I’m not quite sure what you mean … the Gravatar is the image. The image size setting in the plugin’s settings Content tab specifies the size of the image that the Gravatar servers sends back to your WordPress install.

From what you’re describing, but from my reading of it I suspect there’s a CSS issue, probably from your theme, bleeding over into the plugin’s CSS and overriding the image settings in the biography box.

Can you post a publicly accessible link so I can take a look at this and see if my theory holds water?

-Gary

One other thing, you’re correct that the default Gravatar size is 80×80 px (https://en.gravatar.com/site/implement/images/) but only if no size is specified when the image is requested. However, WordPress wraps Gravatar access in the get_avatar API call (https://codex.www.ads-software.com/Function_Reference/get_avatar) which defaults to 96×96 px unless overridden, which is what WP Biographia does with a default 100×100 px image size.

Here how it looks like, https://ganci.net46.net/hello-world/
(Just scroll over at the bottom of the post – The Author Box)

You see there is a white frame around the picture. I guess that means that the Gravatar picture size (100×100 in this case) is different than the Gravatar Box in the “about the author” so it adds up a white frame.

My question is can I make the Gravatar size equal to the Gravatar box so I don’t get that white frames around it.

NOTE: I notice that you can change the Image Size in WP Biographia under Content > Image Size but no matter how bigger I put the size the frames are still there which means I change the Gravatar box as well as the picture with it, not only the picture.

Ah. I think I see what you mean now. I think you want to remove the CSS styling that adds a picture frame to the user’s Gravatar/avatar image.

The image sizing is a bit of a red herring. Testing this on a local install with the image size configured to 100×100 px in the plugin’s settings, you can see from the screen grab below that the image is indeed the correct size.

View post on imgur.com

What I think you want is what the following screen grab shows; the user’s avatar image is still 100×100 px but the picture framing is now gone.

View post on imgur.com

To do this you’ll need to override the plugin’s default CSS, which adds the picture frame amongst other things, with a custom CSS file which should contain the following …

@charset "utf-8";

.wp-biographia-pic {
	background: none !important;
	border: none !important;
}

Place this CSS in a file in your theme’s root directory (something like /wp-content/themes/<your-theme-name>/) in a file called custom.css. You’ll then need to make your theme load the custom CSS by adding the following to your theme’s functions.php (something like/wp-content/themes/<your-theme-name>/functions.php just before the closing ?> PHP tag …

add_action ('wp_enqueue_scripts', 'add_custom_css');
function add_custom_css () {
	$uri = get_stylesheet_directory_uri ();
	wp_enqueue_style ('custom-css', $uri . '/custom.css');
}

… all of the above will load in your custom CSS with each page load and override the plugin’s default CSS to remove the picture frame effect. See this post – https://www.vicchi.org/codeage/wp-biographia/hacking-wp-biographias-appearance-with-css/ – for more detail.

-Gary

Yes Gary, that’s what I meant, however I can’t find custom.css in my theme, there is a file called style.css, maybe that’s the same? Also do you mind posting how to make the border smaller rather than deleting it. I kind of like a little white frame, the default one is too big for my taste.

Sorry to be so annoying about this little details but I’m testing the blog widgets and plugins, before going life with the original, I’m perfectionist when it comes to design… Sorry once again and thank you.

P.S. Maybe you can put this fixture (changing frame size) in the next WP Biographia update (if there is one)

– Viktor

I can’t find custom.css in my theme, there is a file called style.css, maybe that’s the same?

No, that’s most definitely not the same, style.css is the style for your theme not for custom extensions. As I said in my last post …

Place this CSS in a file in your theme’s root directory (something like /wp-content/themes/<your-theme-name>/) in a file called custom.css.

… which means you need to create this file yourself, either editing it in situ on your web host if you have shell access or uploading it to your web host via whether FTP or SFTP/SCP client you normally use.

Also do you mind posting how to make the border smaller rather than deleting it. I kind of like a little white frame, the default one is too big for my taste.

Just reduce the padding for the .wp-biographia-pic class; this ships with a default padding of 10px for the frame, dropping it to, say, 5px, makes the frame smaller. In this case, your custom.css will contain this …

@charset "utf-8";
.wp-biographia-pic {
	background: none !important;
	padding: 5px !important;
}

Maybe you can put this fixture (changing frame size) in the next WP Biographia update (if there is one)

There will definitely be another version of WP Biographia at some point in the future but I don’t think this makes sense as a configuration option. If you want to change the layout or styling of the biography box then you need to know basic CSS; there’s just too many possible permutations of theme and other plugins to make this a reasonable approach I’m afraid.

-Gary

OK, thank you Gary for your help! Have a nice day!