How to add image to author element

[bracas]

I want image to the author element is it possible?

Are you planning to do author element in V2? If is it planned to be released?

[nabeel]

Hey there,

Thanks for writing in! The Author element uses Gravatar image, you can add a Gravatar image to change the author image or use a third party plugin e.g WP User Avatar to do it directly.

Hope this helps!

[bracas]

Ok, no other way with just plain code to eliminate less plugin policy? Gravatar is not even in the /profile.php page?

Are you planning to do a V2 on this element?

We don’t want the author name to be a heading (H4) or another level. Can you help us change this with the child theme so we either change it to body or to another H-level? Both for about author and name of author.

[thai]

Hi There,

@bracas

We don’t want the author name to be a heading (H4) or another level. Can you help us change this with the child theme so we either change it to body or to another H-level? Both for about author and name of author.

Please make sure you’ve installed and activated the child theme: https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57.

After that add the following code to your functions.php file locates in your child theme:

add_action('wp_head', 'change_author_shortcode');
function change_author_shortcode() {
  remove_shortcode( 'x_author' );
  add_shortcode( 'x_author', 'x_shortcode_author_v2code' );
}

function x_shortcode_author_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : csi18n('shortcodes.author-title');
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" " . fa_data_icon('facebook') . "></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" " . fa_data_icon('twitter-square') . "></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" " . fa_data_icon('google-plus-square') . "></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h5 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . "<h3 class=\"h-author mtn\">{$display_name}</h4>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
            . '</div>'
          . '</div>';

  return $output;
}

You can see that I’ve changed the author name and about author text to h5 and h3.

@bracas

I tried everything but can not control the image more than border radius. Thanks

You can try adding this custom CSS under Theme Options > CSS:

.x-author-box.cf img {
    border-radius: 50%;
    padding: 4px;
    background: #4ac57b;
    width: 100%;
    height: 100%;
    max-width: 100px;
}

This CSS above will add the border color and border radius as well.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[bracas]

Many thanks thai. Is it possible with some php in childs functions.php to activate html code into the bio author fields?

Added the code to functions without success on frontend. we have all cache flushed. and ?clearcache which always bypass.

[christian]

Hey @bracas,

This is not a feature offered in Pro. You could try a plugin like this or follow this guide. Just note that once you add HTML in the bio, it might break the description display because it’s wrapped in <p class=\"p-author mbn\">{$description}</p>. You would also need to change that to div

Also, there’s currently no plan on creating a V2 Author element.But, I’ll forward this as feature request.

Thanks.

[bracas]

Ok thanks, I designed my own with the convenience page builder. Solves all the problems Though it was more convenient with the author element but it was better design on my own. Thanks anyway.

[Prasant]

You are most welcome.