0

I have the following code that fetches the avatar in WordPress

<?php echo get_avatar(ThemexUser::$data['user']['ID'], 200); ?>

and I would like to add the following clip-path into the avatar code:

clip-path="url(#myClip)"

How would I do that?

1

You can use the extra_attr input argument to add extra arguments to the gravatar's image tag:

<?php echo get_avatar( 
    ThemexUser::$data['user']['ID'], 
    200,                                            // size 
    '',                                             // default
    '',                                             // alt 
    [ 'extra_attr' => 'clip-path="url(#myClip)"' ]  // args
); ?>

but note that it's unescaped.

You could also add e.g. class="hexagon" with:

<?php echo get_avatar( 
    ThemexUser::$data['user']['ID'], 
    200,                                            // size 
    '',                                             // default
    '',                                             // alt 
    [ 'class' => 'hexagon']                         // args
); ?>

for easier use where:

.hexagon {
  -webkit-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  -moz-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  -ms-clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
  clip-path: polygon(
    50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%
  );
}

where the hexagon definition is based on this CodePen.

ps: I couldn't resist checking my gravatar in hexagon clip path ;-)

hexagon

  • You're welcome, glad to here it helped @NickGalgay – birgire May 26 '17 at 13:32

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.