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
21 responses to “Display Post Thumbnail Also In Edit Post and Page Overview”
Trik hack yang paten..
This is great. It should be build into the core, I think!
@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.
[…] Display Post Thumbnail Also In Edit Post and Page Overview […]
I think this trick is very useful for photobloggers like me 😉
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?
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
I just looked for EXACTLY that kind of thing for my girls blog! great hack for fotobloggers, a billion thanks
See Also: http://core.trac.wordpress.org/ticket/11692
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/
Just discovered the_post_thumbnail(), and this is a perfect addition! Thanks very much!
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.
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.
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
@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.
@michael
Danke für Deine schnelle Hilfe.
Hey vielen Dank, Du hast mir sehr geholfen.
Danke und
nice day
Tommy
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.
Is there a way to use this code with custom post types without adding the filter and action manually for each custom post type?
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!
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?
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