WordPress.org

Forums

[resolved] Thumbnails Caption (10 posts)

  1. Dolomats0
    Member
    Posted 2 years ago #

    Hello.

    as the title show i want to show a caption under my posts Thumbnails
    if it s possible as u can see on this images under...

    Without caption : http://ibergag.com/thumb.jpg

    With Caption : http://ibergag.com/thumb-caption.jpg

    NB: if ther is some code to insert please lead me exatly wher to
    do it coz i m Noob ^^

    Thank you

  2. Drew Jaynes
    4.2 Release Lead
    Posted 2 years ago #

    Captions for post_thumbnails aren't supported out of the box. You'd need to use a custom function for that. There are several such functions outlined in this other thread though.

  3. alchymyth
    Forum Moderator
    Posted 2 years ago #

    there is some code based on the linked forum topic: http://www.transformationpowertools.com/wordpress/wordpress-post-thumbnails-with-caption

    if you are not familiar with filter functions, read http://codex.wordpress.org/Plugin_API#Filters

  4. Dolomats0
    Member
    Posted 2 years ago #

    Thank you for your support

    This link :
    http://www.transformationpowertools.com/wordpress/wordpress-post-thumbnails-with-caption

    helped me insert the caption as u can see here

    http://ibergag.com/?p=9866

    but still cant get CSS to style it anyone can help ?!

  5. alchymyth
    Forum Moderator
    Posted 2 years ago #

    what exact code have you used?

    I don't see any 'thumbnail' and 'caption' specific css classes with your thumbnail (assuming that this is the caption: PH.CAHFIK ARICH)

  6. Dolomats0
    Member
    Posted 2 years ago #

    i used this funcktion on the file function.php on my current théme folder

    //POST THUMBNAIL AND CAPTION STYLED SIMILAR TO .wp-caption//
    function the_post_thumbnail_and_caption($size = '', $attr = '') {
    global $post;
    
    $thumb_id = get_post_thumbnail_id($post->id);
    
    $args = array(
    'post_type' => 'attachment',
    'post_status' => null,
    'parent' => $post->ID,
    'include'  => $thumb_id
    );
    
    $thumbnail_image = get_posts($args);
    
    if ($thumb_id && $thumbnail_image && isset($thumbnail_image[0])) {
    
    $image = wp_get_attachment_image_src( $thumb_id, $size );
    $image_width = $image[1];
    
    $output = '<div style="width: ' . ($image_width) . 'px">';
    
    $attr['class'] = ''; //move any 'class' attributes to the outer div, and remove from the thumbnail
    
    $output .= get_the_post_thumbnail($post->ID, $size, $attr);
    
    /* //Uncomment to show thumbnail title
    $title = $thumbnail_image[0]->post_title;
    if($title) :
    $output .= '<p>';
    $output .= $title;
    $output .= '</p>';
    endif; */
    
    /* //Uncomment to show the thumbnail caption */
    $caption = $thumbnail_image[0]->post_excerpt;
    if($caption) :
    $output .= '<p>';
    $output .= $caption;
    $output .= '</p>';
    endif;
    
    /* //Uncomment to show the thumbnail description
    $descr = $thumbnail_image[0]->post_content;
    if($descr) :
    $output .= '<p>';
    $output .= $descr;
    $output .= '</p>';
    endif; */
    
    /* //Uncomment to show the thumbnail alt field
    $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
    if(count($alt)) :
    $output .= '<p>';
    $output .= $alt;
    $output .= '</p>';
    endif; */
    
    $output .= '</div>';
    
    }
    echo $output;
    }

    and used this code on the file single.php on current théme folder

    <?php the_post_thumbnail_and_caption('large',array('class' => 'alignleft')); ?>

    and i tried this CSS code on the file style.css on my current théme folder but the CSS dindt work

    .thumbnail-caption { padding: 5px; background: #f5f5f5; border: 1px solid #ddd; }
    .thumbnail-caption-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
    /*
    .thumbnail-title-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
    .thumbnail-description-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
    .thumbnail-alt-text { text-align: center; margin-bottom: 5px; font-size: 90%; }
    */
  7. Dolomats0
    Member
    Posted 2 years ago #

    yes PH.CAHFIK ARICH is the caption.
    (assuming that this is the caption: PH.CAHFIK ARICH)

  8. alchymyth
    Forum Moderator
    Posted 2 years ago #

    my mistake ;-(

    - the css classes were missing in the function code in the linked post;

    corrected (and redundant code removed):

    //POST THUMBNAIL AND CAPTION STYLED SIMILAR TO .wp-caption//
    function the_post_thumbnail_and_caption($size = '', $attr = '') {
    global $post;
    $thumb_id = get_post_thumbnail_id($post->id);
    	$args = array(
    		'post_type' => 'attachment',
    		'post_status' => null,
    		'parent' => $post->ID,
    		'include'  => $thumb_id
    	);
    
    $thumbnail_image = get_posts($args);
    
    if ($thumb_id && $thumbnail_image && isset($thumbnail_image[0])) {
    	$image = wp_get_attachment_image_src( $thumb_id, $size );
    	$image_width = $image[1];
    
    	if($attr) $attr_class = $attr['class'];
    	$attr['class'] = ''; //move any 'class' attributes to the outer div, and remove from the thumbnail
    
    	$output = '<div class="thumbnail-caption attachment-'.$size.($attr?' '.$attr_class:'').'" style="width: ' . ($image_width) . 'px">';
    
    	$output .= get_the_post_thumbnail($post->ID, $size, $attr);
    
    	/* to show the thumbnail caption */
    	$caption = $thumbnail_image[0]->post_excerpt;
    	if($caption) {
    		$output .= '<p class="thumbnail-caption-text">';
    		$output .= $caption;
    		$output .= '</p>';
    	}
    
    	$output .= '</div>';
    	}
    echo $output;
    }
  9. Dolomats0
    Member
    Posted 2 years ago #

    Here we Go, it worked perfectly as u can see HERE

    it look soo mush better

    And big Thanks for your help

  10. alchymyth
    Forum Moderator
    Posted 2 years ago #

    this line made problems in wp3.5:
    $thumb_id = get_post_thumbnail_id($post->id);

    corrected to proper capitalisation:
    $thumb_id = get_post_thumbnail_id($post->ID);

    full code for wp3.5:
    http://pastebin.com/SkGyX1St

Topic Closed

This topic has been closed to new replies.

About this Topic