Rectangle avatars

by

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/

Leave a Comment