1

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?

2

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/

1
  • The more I think about this solution, the more I like it. +1 but I'll hold off accepting in case a non-CSS approach is suggested. Thanks Mar 26 '14 at 23:14
1

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.

5
  • +1. I would saved resized image as attachment and saved it's ID in a transient named like "{$userid}_gravatar_{$size}". The transient can expire in, let's say, a couple of days. When no transient found, get from gravatar, save attachment, and cache the id; otherwise just output the attachment src
    – gmazzap
    Mar 27 '14 at 6:57
  • @G.M. Mind answering?
    – kaiser
    Mar 27 '14 at 7:55
  • is just a little update on your answer, maybe I'll edit it if have time.
    – gmazzap
    Mar 27 '14 at 8:06
  • Thanks for the explanation @kaiser. I'll try the get_avatar filter function. One thing I didn't quite understand from your answer - can I avoid Gravatar fetching images that won't be used? You also mention a delay in the actual fetching. Will disabling Gravatar avoid that? Mar 27 '14 at 9:20
  • Delay = remote request. And no, what you can read above won't avoid that. But you can replace the whole get_avatar() function with your own. Read about "pluggable functions wordpress".
    – kaiser
    Mar 27 '14 at 9:42
0

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.

2
  • Yeah, the single argument is the issue. Results in height and width being the same always. Mar 26 '14 at 23:15
  • 1
    When I delete the links from your answer, there wouldn't be anything left. Please improve your answer. In case the links are gone, it wouldn't be helpful in any way. Thanks.
    – kaiser
    Mar 27 '14 at 1:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.