struggling with syntax for the_post_thumbnail();

Question

i want to display the alt text for a featured image.

I've been using the the_post_thumbnail(); function to display the image

like this:

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail('medium');
} 

Question: How do I display the Alt attribute for this image?

Answer 1

the_post_thumbnail() accepts second parameter $attr, that's array of options, so to display alt for image use something like this:

 the_post_thumbnail( 'medium', array( 'alt' => 'Image alt' ) );

Answer 2

something I tried a while ago - purely experimental, not widely tested - this will wrap the thumbnail and caption into a div similar to a wp-caption image: (this filter function needs to be added to functions.php of your theme)

// 27/01/2012 alchymyth
// show thumbnail with caption, if it is entered, wrapped with <div class="wp-caption thumb-caption"> ;
// show just the thumbnail otherwise
add_filter('post_thumbnail_html','add_post_thumbnail_caption',10,5);
function add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {        
if( $html == '' ) { return $html;
} else {
 $out = '';

  $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));

  if ($thumbnail_image && isset($thumbnail_image[0])) {

  $image = wp_get_attachment_image_src($post_thumbnail_id, $size); 
  $t_width = $image[1] +0; // +0 here for no extra padding, needs to be considered in writing css - the default image caption uses +10;
  $class = $attr['class'];
    if($thumbnail_image[0]->post_excerpt) $out .= '<div class="wp-caption thumb-caption '.$class.'" style="width:'.$t_width.'px; ">';

    $out .= $html; 

    if($thumbnail_image[0]->post_excerpt) $out .= '<p class="wp-caption-text">'.$thumbnail_image[0]->post_excerpt.'</p></div>'; 
  }
return $out; 
}
/*css classes for this:
.wp-caption.thumb-caption { }
.wp-caption.thumb-caption img { }
.wp-caption.thumb-caption .wp-caption-text { }
*/
}

example output:

<div class="wp-caption thumb-caption " style="width:165px; "><img width="165" height="150" src="http://localhost/wordpress/wp-content/uploads/2010/05/birthday_cake-180x163.jpg" class="attachment-580x150 wp-post-image" alt="happy birthday" title="birthday_cake" /><p class="wp-caption-text">happy birthday</p></div>

Answer 3

This is what I ended up using on my page.php

It's enclosed by php operators. I'm using css to format it.

It seems a little too simple. What am I missing?

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    echo '<div class="featured-image">';
    the_post_thumbnail('medium');
    echo '<span id="caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</span>';
    echo '</div>';
}