Hexagon avatar with get_avatar()

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 😉

Related Posts: