Show author name not the author ID

Question

I have added the code to get the author, but it displays the author's ID number. How can I get the author's name to show and their gravatar.

CODE

<?php
$product_pages_args = array(
    'meta_key' => '_wp_page_template',
    'meta_value' => 'page_library_html_content.php',
    'hierarchical' => '0'
);
$product_pages = get_pages( $product_pages_args );
?>

<?php
foreach ( $product_pages as $product_page ) {
    echo '<div id="posts" class="flex_100">';
    echo '<div id="library_title"><a href="' . get_permalink( $product_page->ID ) . '">' . $product_page->post_title  . '</a></div>';
    echo '<div class="library-content">' . get_post_field('post_content', $product_page->ID ) . '</div>';
    echo '<div class="library-author">' . get_post_field('post_author', $product_page->ID ) . '</div></div>';
}
?>

Answer 1

<?php
$product_pages_args = array(
    'meta_key' => '_wp_page_template',
    'meta_value' => 'page_library_html_content.php',
    'hierarchical' => '0'
);
$product_pages = get_pages( $product_pages_args );
?>

<?php
foreach ( $product_pages as $product_page ) {
    $author_id =  get_post_field('post_author', $product_page->ID );
    $author_details = get_user_by( 'id', $author_id );
    $author_name = $author_details->first_name . ' ' . $author_details->last_name;  

    echo '<div id="posts" class="flex_100">';
    echo '<div id="library_title"><a href="' . get_permalink( $product_page->ID ) . '">' . $product_page->post_title  . '</a></div>';
    echo '<div class="library-content">' . get_post_field('post_content', $product_page->ID ) . '</div>';
    echo '<div class="library-author">' . $author_name . '</div>';
    echo get_avatar( $author_id , 32 );
    echo '</div>';
}
?>

Answer 2

Well, since you now have the author's ID, you can use get_the_author_meta to get their name. borrowing from your code above:

$author_id = get_post_field('post_author', $product_page->ID ); 

//get the author's display name 
$author_name = get_the_author_meta( 'display_name', $author_id ); 
echo '<div class="library-author">' . $author_name . '</div>';

and, since you have the author id, you can easily fetch the (grav)atar using

get_avatar( $author_id );

which returns an img element. You'll have to echo it out in the appropriate place something like:

echo get_avatar( $author_id );

will result in <img src="http://some-url.com/some-image.gif">

see the documentation for get_avatar to see the optional parameters you can pass to it. http://codex.wordpress.org/Function_Reference/get_avatar