Rectangle avatars

Question

I'm using get_avatar() to output images of my users.

Ref: https://codex.wordpress.org/Function_Reference/get_avatar

The optional size parameter lets me specify a size. However, this makes a square avatar.

How can I output an avatar that is rectangle. Something like width 300px and height 150px?

Answer 1

As far as I know the get_avatar() function only allows for square values. That doesn't mean you couldn't use styling to display a rectangular avatar. Essentially you would use styling to "shave off" 150px from the width.

So, let's assume that your theme file produces a 300 x 300 pixel avatar for the post author using the following code:

<?php echo get_avatar( get_the_author_meta( 'ID' ), 300 ); ?>

It's then only matter of enclosing the avatar image inside of a DIV tag that you can style, like so:

<div class="auth-avatar">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 300 ); ?>
</div>

You then use CSS to crop and center the image:

.auth-avatar {
    width: 300px;
    height: 150px;
    overflow: hidden;
}

.auth-avatar img {
   width: 100%
}

That should do the trick. Here is a fiddle with the results:

http://jsfiddle.net/wLg4a/20/

Answer 2

Gravatar.com - Remote Service

The point (a.k.a. problem) is, that the resizing doesn't happen on your server. It happens on the server from gravatar:

http(s)://*.gravatar.com

See in source - by using a query argument called s. So whatever you do, Gravatar will respond with a square image in the size between 1px and 2048px:

"$host/avatar/ad516503a11cd5ca435acc9bb6523536?s={$size}";

Gravatar has an API... which can't do that - sorry to disappoint you.

Solutions - Workarounds

So the only solution is CSS in that case - BUT ... you use completely different avatars with a filter:

return apply_filters( 'get_avatar', $avatar, $id_or_email, $size, $default, $alt );

So in theory (not tested) you could do something like the following:

add_filter( 'get_avatar', 'wpse139329ResizedAvatar', 10, 5 );
function wpse139329ResizedAvatar( $avatar, $id_or_email, $size, $default, $alt )
{
    $newAvatar = wp_get_image_editor( $avatar );
    if ( is_wp_error( $newAvatar ) )
        return $avatar;

    $newAvatar->resize( 500, 100, true );
    $info = pathinfo( $avatar );
    $newAvatar->save( $info['filename'].$info['extension'] );
    return $newAvatar;
}

Anyway, it should work along above shown lines.

Drawbacks

The drawback will be, that core doesn't support anything aside from turning off Gravatars completely. The reason can simply be guessed: WordPress.com is owned by the same guy who owns Gravatar.com (and several other companies like Vaultpress). So you will be left with an Gravatar that is remote fetched (including the delay) from a server and won't be used at all then.

Thing's aren't that bad...

In fact the function get_gravatar() is "pluggable":

if ( !function_exists( 'get_avatar' ) ) :

So if you overwrite it, you can replace it completely with a different method of displaying avatars for your users. Craft one yourself, grab a plugin that does it, etc.

Answer 3

Ref: Gravatar Images, Gravatar only support square images, even the function reference get_avatar(), states a single argument.

However if you really wanna do that, best option would it with CSS, I guess.