将图像维度添加到Media Upoader上的Media Library选项卡

我想将每个图像的尺寸添加到媒体上传器的“媒体库”选项卡中。

我有一个多作者网站require users to add a featured image with minimum dimensions. 为了让他们更方便，我想在媒体库中包含图像的尺寸，这样他们就不需要单击图像来检查尺寸是否足够大，是否可以用作特色图像。

这是我试图完成的截图 dimensions on media library tab

我不是编码员，所以这就是我需要帮助的地方。查看中的核心代码media.php, 似乎没有办法实际添加一个新列，但这很好。我在想可以在图片标题后的一段时间内添加尺寸。

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

本部分专门针对line 1127, 当用户单击“显示”时，显示图像上的尺寸

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

折叠或“隐藏”时图像的标题由以下内容生成：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>" : \'\';

我希望从第1127行获取代码并将其插入<div class=\'filename new\'> 在标题后的1079/1080行上<span class="img-dimensions" style="float:right;margin-right:100px"> 所以我可以在标题结束后给它一些空间。

提前谢谢。

/* * 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; } }

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

相关推荐