Add Image Dimensions to Media Library Tab on Media Upoader

Question

I would like to add the dimensions of each image to the media library tab in the media uploader.

I have a multi-author website, where I require users to add a featured image with minimum dimensions. To make it even easier for them, I would like to include the dimensions of an image in the Media Library right there, so they don't need to click on an image to check if the dimensions are large enough to use as a featured image.

Here is a screenshot of what I am trying to accomplish

I am no coder, so this is where I need help. Looking through the core code in media.php, it appears there may not be a way to actually add a new column, but that's fine. I was thinking the dimensions could be added in a span after the image title.

The media dimensions are used in lines 1097-1130

$media_dims = '';
$meta = wp_get_attachment_metadata( $post->ID );
if ( is_array( $meta ) && array_key_exists( 'width', $meta ) && array_key_exists( 'height', $meta ) )
    $media_dims .= "<span id='media-dims-$post->ID'>{$meta['width']}&nbsp;&times;&nbsp;{$meta['height']}</span> ";
$media_dims = apply_filters( 'media_meta', $media_dims, $post );

$image_edit_button = '';
if ( gd_edit_image_support( $post->post_mime_type ) ) {
    $nonce = wp_create_nonce( "image_editor-$post->ID" );
    $image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <img src='" . esc_url( admin_url( 'images/wpspin_light.gif' ) ) . "' class='imgedit-wait-spin' alt='' />";
}

$attachment_url = get_permalink( $attachment_id );

$item = "
$type_html
$toggle_links
$order
$display_title
<table class='slidetoggle describe $class'>
    <thead class='media-item-info' id='media-head-$post->ID'>
    <tr valign='top'>
        <td class='A1B1' id='thumbnail-head-$post->ID'>
        <p><a href='$attachment_url' target='_blank'><img class='thumbnail' src='$thumb_url' alt='' /></a></p>
        <p>$image_edit_button</p>
        </td>
        <td>
        <p><strong>" . __('File name:') . "</strong> $filename</p>
        <p><strong>" . __('File type:') . "</strong> $post->post_mime_type</p>
        <p><strong>" . __('Upload date:') . "</strong> " . mysql2date( get_option('date_format'), $post->post_date ). '</p>';
        if ( !empty( $media_dims ) )
            $item .= "<p><strong>" . __('Dimensions:') . "</strong> $media_dims</p>\n";

        $item .= "</td></tr>\n";

This part specifically on line 1127, displays the dimensions on the image when the user clicks "Show"

        if ( !empty( $media_dims ) )
            $item .= "<p><strong>" . __('Dimensions:') . "</strong> $media_dims</p>\n";

The title of the image when collapsed or "Hidden" is generated by line 1079-1080

$display_title = ( !empty( $title ) ) ? $title : $filename; // $title shouldn't ever be empty, but just in case
    $display_title = $show_title ? "<div class='filename new'><span class='title'>" . wp_html_excerpt( $display_title, 60 ) . "</span></div>" : '';

My hope is to take the code from line 1127 and insert it in the <div class='filename new'> on line 1079/1080 after the title, and give it a <span class="img-dimensions" style="float:right;margin-right:100px"> so I can give it some space after the end of the title.

Thanks in advance.

Answer 1

IMHO, I think there's no much of a solution in the WordPress filters realm...

I managed to make it work using jQuery. Maybe there's a cleaner way to write this, but it is functional as it is now. Tested in WP 3.1 through 3.4-alpha4

/* 
 * Display Image Dimensions on Media Uploader tabs (Gallery and Library) 
 * Added CSS to adjust the header of the Gallery tab (Order and Actions are pushed to the far right)
 * @author: brasofilo
 */

add_action('admin_head', 'wpse50904_script_enqueuer');

function wpse50904_script_enqueuer() {
    global $current_screen;
    if($current_screen->id == 'media-upload' && ($_GET['tab'] == 'gallery' || $_GET['tab'] == 'library')) {
        echo <<<HTML
            <style>#media-upload th.order-head {width: 5%} #media-upload th.actions-head {width: 10%}</style>
            <script type="text/javascript">
            jQuery(document).ready( function($) {
                $('.filename.new').each(function(i,e){
                    var filename = $(this).next('.slidetoggle').find('thead').find('span[id^="media-dims-"]').clone().appendTo(this);
                    filename.css('float','right').css('margin-right','100px');
                }); 
            });
            </script>
HTML;
    }
}

Answer 2

[EDIT: This works for the main media library but not the media uploader as requested - I'm going to test and see if I can get that working. I'll update if I find a fix.]

I believe you can add this function to your theme's functions.php file:

 <?php
function my_column( $cols ) {
    $cols["dimensions"] = "Dimensions (width, height)";
    return $cols;
}
function my_value( $column_name, $id ) {
    $meta = wp_get_attachment_metadata($id);
           if(isset($meta['width']))
           echo $meta['width'].' x '.$meta['height'];
}
add_filter( 'manage_media_columns', 'my_column' );
add_action( 'manage_media_custom_column', 'my_value', 10, 2 );
?>

Hope this helps, best of luck!