Plugin / Avatar – User Photo Shortcode

Description

This plugin adds the avatar shortcode. It lets you show any user photo on your site. Simply place the [get_avatar] shortcode in you post content. While you can do this in templates many times you might want to show an avatar without writing PHP. This plugin adds the same paramaters that the get_avatar function does.

As a developer you might use this in your template:

<?php echo get_avatar( '[email protected]', 64, 'http://www.example.com/custom-default-avatar.png', 'Image Alt Text' ); ?>

The above would get you this for logged in users:

<img alt="" src="https://secure.gravatar.com/avatar/123" class="avatar avatar-64 photo" height="64" width="64">

With this shortcode you can do the same thing in your content:
[get_avatar id=”[email protected]” size=”64″ default=”http://www.example.com/custom-default-avatar.png” alt”Image Alt Text”]

The shortcode would return almost the exact same thing with some additionals:

<span class="get_avatar " style=""><img alt="Image Alt Text" src="https://secure.gravatar.com/avatar/123" class="avatar avatar-64 photo" height="64" width="64"></span>

I added a span tag around the image to allow for additional styling. Just add the style or class attributes to the shortcode to customize it’s look.

[get_avatar class="circle"]

Currently I added the rounded and circle styles which you can use. Circle will make the image a complete circle similar to how gmail shows your picture in the top right corner.

[get_avatar style="border: 2px solid #000000"]

While you can include any of your classes using the class attribute you can also include styles inline using the method above. This will get added directly inline in the span tag. While this is good for general styling like borders, to add css directly to the image itself use either your own class or the get_avatar class and add any additional styling to your themes stylesheet.

This method gives you the most customization although it requires you to add css.

Using get_avatar in your stylesheet:

.get_avatar img {

}

Or you could add several different styles depending on the pages of your site.

For example I could add this to my stylesheet to style to style different avatars:

.get_avatar homepage img {

}

.get_avatar profilepage img {

}

.get_avatar author john_smith img {

}

Then my shortcodes would look like this :

[get_avatar class="homepage"]

[get_avatar class="profilepage"]

[get_avatar class="author john_smith"]

Thats pretty much it. See https://codex.wordpress.org/Function_Reference/get_avatar for the default template function usage. Questions or requests let me know.