Display Post Thumbnail Also In Edit Post and Page Overview

WordPress version 2.9 introduced the function of Post Thumbnail. We wrote about this feature in this post and here and also in many other blogs. I find it an advantage, if the overview of articles and pages also provides the associated thumbnail. Therefore, I would like to introduce a small code snippet that makes just that.

The above screenshot should illustrate what the little extension does. The following code must be put in a Plugin or be copied into the functions.php of the theme.

if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
	
	// for post and page
	add_theme_support('post-thumbnails', array( 'post', 'page' ) );
	
	function fb_AddThumbColumn($cols) {
		
		$cols['thumbnail'] = __('Thumbnail');
		
		return $cols;
	}
	
	function fb_AddThumbValue($column_name, $post_id) {
			
			$width = (int) 35;
			$height = (int) 35;
			
			if ( 'thumbnail' == $column_name ) {
				// thumbnail of WP 2.9
				$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
				// image from gallery
				$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
				if ($thumbnail_id)
					$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
				elseif ($attachments) {
					foreach ( $attachments as $attachment_id => $attachment ) {
						$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
					}
				}
					if ( isset($thumb) && $thumb ) {
						echo $thumb;
					} else {
						echo __('None');
					}
			}
	}
	
	// for posts
	add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
	add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
	
	// for pages
	add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
	add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
}

Comments are closed.

21 comments

  1. JhezeR

    Trik hack yang paten..

  2. Jens Törnell

    This is great. It should be build into the core, I think!

  3. Frank

    @Jens: I think this is ot so great for default WP Core, for many users is this not realy great and it is a new query per post to the datapase. MAybe the edit-area was slowly on many posts an the table.

  4. Albert

    I think this trick is very useful for photobloggers like me ;-)

  5. alex

    How can this hack be joined with the previous post "Custom Post Type" ? I mean what are the name of the filters and actions needed?

  6. Tomáš Kapler

    I just wonder why you are getting ALL attachements, cycle using foreach them, convert all of them and then show only one (the last one). It would be about 8 rows shorter and way faster to show only one (best would be first) attachments:
    1. define 'numberposts' => 1 to get_children
    2. move it after thumbnail so you will not search it when thumbnail is defined
    3. call wp_get_attachment_image only on one place for thumbnail or first_image if thumbnail is n/a

    P.S.: you can show how to move the image in the first column, where it is typicaly placed in most aplications - it is not obvious for many users here

  7. Ben

    I just looked for EXACTLY that kind of thing for my girls blog! great hack for fotobloggers, a billion thanks

  8. rami

    See Also: http://core.trac.wordpress.org/ticket/11692

  9. Michael Fields

    Cool post! I've always wanted something like that but never really got around to implementing it. Thanks for saving me a bit of time:) Those of you who like this post may also be interested in my latest plugin that does the same thing for Categories, Tags and Custom Taxonomies.

    http://wordpress.org/extend/plugins/taxonomy-images/

  10. Simon Fairbairn

    Just discovered the_post_thumbnail(), and this is a perfect addition! Thanks very much!

  11. Marty Martin

    What if I only wanted to show the actual the_post_thumbnail() and not embedded images from the post.

    It would be handy to figure out which pages/posts don't have thumbnails set yet.

  12. David Cowgill

    I was going to build the same exact thing for my classified ads theme but you saved me a lot of time!

    Since some of my legacy posts (ad listings) have image paths stored in a comma delimited custom field, I had to also include a way to show them as well. So what I did was comment out the "None" and included another function that loops through and lists the first image resized using timthumb.

    // echo __('None', 'cp');
    cp_single_image_legacy($post_id, $width, $height, '', false);

    Thanks for posting this. Great site.

  13. Thomas Sitte

    Hi

    This is a nice script. the problem for me is: i will not the picture from gallery or mediacenter, but i will see the pic from costum_field names "image" (link). have you an idea?
    Thanks for your help.
    Tommy

  14. Michael

    @Thomas Sitte: change

    $thumbnail_id = get_post_meta( $post_id, 'your_custom_field', true );
    if($thumbnail_id) {
    echo 'dunno what in your field is' . $thumbnal_id ;
    }else{
    echo 'none;
    }

    I hope, you understand what i mean.

  15. Thomas Sitte

    @michael

    Danke für Deine schnelle Hilfe.

    Hey vielen Dank, Du hast mir sehr geholfen.

    Danke und
    nice day

    Tommy

  16. Jan

    Is there a way to add an "if no the_post_thumbnail nor children exist, scan for HTML images and print them instead" kind of thing ?

    It would be useful when the client mess around with images ... :)

    Thanks guys for the code.

  17. Desik

    Is there a way to use this code with custom post types without adding the filter and action manually for each custom post type?

  18. ubwhipd

    Great tutorial.

    But is there a way to have better control as to where the column sits in relation to the others? I'd like it to appear 1st (left of the 'Title' column). I'd also like to display each post's excerpt as a column!

  19. Freddie

    I've implemented this to my blog, but a weird thing happens. The same image is shown for all of the posts. Just like in the image on this article, all posts feature the same image, even when different images are posted in the actual article.

    What am I doing wrong?

  20. abmcr

    The snippet is very cool, but if a thumbnail is added fron NgGallery, the code don't show it; i have edited as

    [code]
    function fb_AddThumbValue($column_name, $post_id) {

    $width = (int) 35;
    $height = (int) 35;

    if ( 'thumbnail' == $column_name ) {
    // thumbnail of WP 2.9
    $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
    // image from gallery
    $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
    if ($thumbnail_id){
    $xx=get_post_thumbnail_id($post_id);
    if ( is_string($xx) && substr($xx, 0, 4) == 'ngg-') {
    $thumbnailID = substr($xx, 4);
    $image = nggdb::find_image($thumbnailID);
    if ($image) { // Safety check for null pointer.
    $temp=get_bloginfo('template_directory')."/resize/timthumb.php?src=".$image->thumbURL."&h=35&w=35";
    $thumb="";
    }
    }else $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
    }
    elseif ($attachments) {
    foreach ( $attachments as $attachment_id => $attachment ) {
    $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
    }
    }
    if ( isset($thumb) && $thumb ) {
    echo $thumb;
    } else {
    echo __('None');
    }
    }
    }

    [/code]
    and it work also with thumbnail from nextgen; obvious it is need to use a timthumb.php file

    Ciao

One pingback

  1. WordPress Picks for the Week [02/17] | Techtites