[Plugin: WP Biographia] Problems with Alignment of User Image

Following up on the email thread we’ve been having …

1) Alignment of User Image – for some reason the image taken from the Simple Local Avatars (WordPress Users) is 96 x 96 pixels but ends up smaller and in the bottom left hand-side of the gravatar box – see user bio at the bottom of this post:
https://focusingonwildlife.com/news/the-black-bellied-whistling-duck/

As I first suspected, the Simple Local Avatars plugin has changed since I last tested with it. Previously, this plugin used WordPress’s “pluggable” feature to override the functionality of the get_avatar() API. WP Biographia then used the get_avatar filter to fixup the CSS for the IMG tag that get_avatar() emits and thus get the right sizing and placement, independent of the theme’s avatar specific CSS, if any.

The latest version of Simple Local Avatars now hooks directly into the get_avatar filter and as filters are fired in the order they’re enqueued, the Simple Local Avatars filter code was firing before WP Biographia’s and thus the IMG tag’s CSS was never being fixed up so your theme’s CSS for avatars is causing the mis-placement and sizing of the image.

So I’ve modified the code for the plugin to detect whether the SImple Local Avatars plugin is installed and active. If it’s not, then WP Biographia works as before, via the get_avatar filter. But if Simple Local Avatars is installed and active, then WP Biographia hooks into Simple Local Avatar’s simple_local_avatar filter instead to fix up the IMG tag’s CSS.

There’s a beta version of WP Biographia that supports this at https://raw.github.com/vicchi/wp-biographia/v3.2.2-changes/wp-biographia.php, download this and drop this into /wp-content/plugins/wp-biographia/, overwriting the previous version and this should solve your issue. If there’s no unforeseen side effects, I’ll include this change in the next official release of the plugin.

This beta version should only change the avatar’s CSS when it’s being displayed in the context of WP Biographia’s Biography Box and not anywhere else, such as avatars in comments. Please let me know if you find this isn’t the case.

2) Avatar Frame – the frame for the Avatar is white – is there any way to change this color?

Yes – you’ll just need to add some custom CSS to set the background attribute for the wp-biographia-pic class. This post – https://www.vicchi.org/codeage/wp-biographia/hacking-wp-biographias-appearance-with-css/ – will give you the background information you’ll need to create a custom CSS file and load it from your theme’s functions.php, if you don’t know this already.

3) Alignment of Contact Links – if we uncheck user’s email address, the line of contacts does not re-align with the left-hand side of the bio text.

This is another CSS issue, but this time it’s half from your theme and half from WP Biographia.

WP Biographia indents the contact list as part of its CSS, but I tend to agree with you that it should really be aligned with the left hand edge of the biography text itself. I’ll fix this in the next release.

However, regardless of this, your theme’s CSS is caused a bigger indentation. The theme’s CSS in style.css at line 61 defines this …

ul, ol {
	margin: 0.5em 0 1.5em 1.5em;
	padding-left: 20px;
}

and it’s this margin and padding which is, I believe, causing the indentation you’re seeing. You should be able to override this in the custom CSS file which you’ll be creating for the fix for question #2 above.

Let me know how you get on with all of this …

-Gary

1) Alignment of User Image – for some reason the image taken from the Simple Local Avatars (WordPress Users) is 96 x 96 pixels but ends up smaller and in the bottom left hand-side of the gravatar box – this problem has been completely solved by overwriting the previous version of wp-biographia.php by the beta version of WP Biographia that supports this at https://raw.github.com/vicchi/wp-biographia/v3.2.2-changes/wp-biographia.php.

2) Avatar Frame – the frame for the Avatar is white – is there any way to change this color?

3) Alignment of Contact Links – if we uncheck user’s email address, the line of contacts does not re-align with the left-hand side of the bio text.

Issue #2 and #3 have been solved by:

a) creating a custom.css including the following code:

@charset "utf-8";

.wp-biographia-pic {
background: #333333;
border: 0px solid #E7E7E7;
padding: 5px !important;
}

ul.wp-biographia-list-text, ul.wp-biographia-list-icon {
margin: 0.5em 0 1.5em 0;
padding-left: 0px;
}

b) placing custom.css in the WordPress Theme’s main folder
c) adding to the following code to functions.php in the same folder:

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');
}

An example of the final reult can be seen on the following link:

https://focusingonwildlife.com/test-platform/american-oystercatcher-in-a-tidal-lagoon/

Sincere thanks to Gary Gale for his outstanding support and patience in resolving these 3 issues.

Thanks Ken. It took a while but I’m glad we got it all sorted out.

-Gary