Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 dimensions on media library tab

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";

media dimensions

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.

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted
+100

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;
    }
}
share|improve this answer
    
This works great! I will pay the bounty tomorrow unless someone seems to find a better method, but I think this is probably the best way to do it. –  Travis Pflanz May 4 '12 at 21:54
    
thanks for the compliment, Travis! –  brasofilo May 4 '12 at 22:07
add comment

[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 );
?>

I found this in this article, can't claim credit. :) http://w3blog.in/add-extra-column-in-wordpress-media-library.html

Hope this helps, best of luck!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.