Display caption for featured images

  • Resolved Foliferous

    (@revs)


    10 years, 5 months ago

    Hello,

    I’ve seen plenty of threads about this, but sadly I don’t understand a single word. People post PHP codes, but I have no idea what to do them or where to place them.

    Does anyone know of a simple solution how I could display captions for featured images? In case there’s no “simple solution”, a solution where it’s clearly explained step-by-step wouldn’t be bad? Perhaps someone knows of such a tutorial, I myself couldn’t find one sadly.

    I’m looking forward to your answers WordPressers!

    Regards

    [ Again: Please do not bump, that’s not permitted here. ]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    10 years, 5 months ago

    add this into functions.php of your theme:

    // 27/01/2012 alchymyth
// show thumbnail with caption, if available, wrapped with '.wp-caption thumb-caption' div;
// show just the thumbnail otherwise
// for featured images in the loop
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 == '' || !in_the_loop() ) { 

	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; // +10 here for 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;
}
}

    might need some extra CSS; example:

    .wp-caption.thumb-caption { margin-bottom: 15px; }
.wp-caption.thumb-caption img { margin: 0; }
.wp-caption.thumb-caption .wp-caption-text {
	border-radius: 3px;
	border-top-radius: 0px;
  	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
	padding: 0 5px;
	background: #fff;
}
    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Amazing, it worked! 🙂

    Thanks a lot — and sorry for bumping, I’ll keep note of it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Display caption for featured images’ is closed to new replies.