3

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'), "\">";
  • Good question. Can you post ALL the code your theme includes to display the comment avatar images. – Brad Dalton Aug 7 '14 at 4:53
  • Sure thing! I'll make an edit to the question. – Thomas Frank Aug 7 '14 at 4:55
  • Please note this question should be asked on the Premium theme developers forums as you are using a commercial theme framework named Volatyl – Brad Dalton Aug 7 '14 at 5:27
  • Thanks - sorry about that. Should I delete the question? – Thomas Frank Aug 7 '14 at 11:53
  • It may be put on hold but won't be deleted so not to worry. The reason is we don't have full access to all the code so its hard to provide an accurate solution tested on your theme framework. – Brad Dalton Aug 7 '14 at 11:56
0

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.
  • This is a good option for plugins wanting to block all the avatars from pinterest, but simply adding the extra_attr argument to his get_avatar() function might make more sense in his case. – Bryan Willis Dec 3 '15 at 8:55
1

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.

0

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"); 
  • Hey Chinmoy there is actually a filter option for changing avatar HTML markup named get_avatar as Brad Dalton mentioned in the accepted answer. It's documented here. Unfortunately, your example would break the avatar image. To properly add additional attributes you would use the extra_attr paramater of the get_avatar() function. – Bryan Willis Dec 3 '15 at 8:42

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.