How do I add a custom HTML attribute to get_avatar?

Question

I'm trying to add Pinterest's nopin="nopin" HTML attribute to the comment avatar image tags on my blog. Here's the function I'm using to call the avatar on each comment:

get_avatar($comment, 50, vol_random_image())

vol_random_image() just selects an image from an array if the commenter doesn't have a Gravatar.

I know get_avatar has an $alt attribute, but that only sets an alt tag, right? How would I go about adding this custom HTML tag?

Full code of the function:

echo "<li ", comment_class(), " id=\"li-comment-", comment_ID(), "\">\n
\t<article id=\"comment-", comment_ID(), "\" class=\"comment\">\n
\t\t<footer>\n
{$tab3}<div class=\"comment-author vcard\">\n
{$tab3}\t<div class=\"comment-avatar\">\n",
get_avatar($comment, 50, vol_random_image()),
"{$tab3}\t</div>\n
{$tab3}</div>\n" .
(($comment->comment_approved == '0') ? 
    sprintf("{$tab3}<em>") . __('Your comment is awaiting moderation.', 'volatyl') . sprintf("</em><br />\n") : 
'') .
"{$tab3}<div class=\"comment-meta commentmetadata\">\n{$tab3}\t" .
sprintf('<cite class="fn">%s</cite>', get_comment_author_link()) .
"\n{$tab3}\t<div class=\"comment-date\">\n
{$tab3}\t\t<a href=\"", esc_url(get_comment_link($comment->comment_ID)), "\"><time pubdate datetime=\"", comment_time('c'), "\">";

Answer 1

You can use the get_avatar filter to modify the output of the image tag and add your HTML attribute

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

$avatar : Image tag for the user's avatar.

Answer 2

Answer

get_avatar($comment, 50, vol_random_image(), '', array('extra_attr' => 'nopin="nopin"'));

---

Explanation

Take a look at the get_avatar function:

echo get_avatar( $id_or_email, $size, $default, $alt, $args );

Looking at this function, you'll notice the last parameter allowed is $args, which essentially lets you alter all values aside from $id_or_email, $size, $default, and $alt.

---

Below are the additional args available listed on the codex page:

• size
• height
• width
• default
• force_default
• rating
• scheme
• class
• force_display
• extra_attr
  
  And the extra_attr paramater is documented as follows:

extra_attr
   (string) (optional) HTML attributes to insert in the IMG element. Is not sanitized.
   Default: empty.

---

How to implement:

Unfortunately, as far as I've found there are no tutorials on the web implementing the useage of extra_attr or any of the other additional arguments listed above. Additionally, there was only one WPSE question I've found that even mentions or asks about any of this. If you're anything like me, most documentation (like what I posted above) is useless to you unless accompanied by an example...

Here's an example how you could implement this in your comment list template:

  <?php 
        $atts = array( 
                       'extra_attr' => 'nopin="nopin"',
                       'class' => 'media-object img-rounded'                  
        );
        if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'], '', '', $atts );
   ?>

The above would output the commenter avatar img tag adding the following attributes:

nopin="nopin"
class="media-object img-circle"

This example gives you your desired attributes to disable pinning of the avatar images on Pinterest. Additionally, it shows how to add extra classes for when you'd want to style certain images (in this case the comment images).

---

Alternatively, you can use the get_avatar filter to filter then entire html code if desired. This is often the desired approach for plugin authors.

Seeing that this isn't all that well documented and seems like a feature a lot of people would want to know, I decided to create a plugin that lets you implement this in a shortcode for your posts, widgets, menus, etc. It can be downloaded here on Github.

Answer 3

Actually there have no filter option for Avatar HTML markup. But I think that you can do it by odd way. I did not test the code but you can try this once:

get_avatar($comment, 50, vol_random_image() , "' nopin='nopin");