3

So I uploaded a lot of similar looking photos, and uploaded a duplicate or two.

I go into the backend to the Media panel, but alas, each row has a small thumbnail, making it time consuming to figure out which ones are the duplicates, or just to tell them apart.

How would I make the image bigger? At the moment it is 60x60 but 128x128 would be nicer or maybe even larger!

Just to clarify, I am talking about the admin area, not the frontend/theme

1
  • hmmm I suspect I will need to remove the 'icon' column and replace it with a column of my own
    – Tom J Nowell
    Jul 21, 2012 at 0:28

3 Answers 3

2

I don't see any way of hooking into this. Following the lead of wp_get_attachment_image takes nowhere...

// wp-admin/includes/class-wp-media-list-table.php
// line 200

case 'icon':
    $attributes = 'class="column-icon media-icon"' . $style;
?>
    <td <?php echo $attributes ?>><?php
        if ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) {
            if ( $this->is_trash || ! $user_can_edit ) {
                echo $thumb;
            } else {
?>
            <a href="<?php echo get_edit_post_link( $post->ID, true ); ?>" title="<?php echo esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;' ), $att_title ) ); ?>">
                <?php echo $thumb; ?>
            </a>

<?php           }
        }

enter image description here

Inspecting the output we see that the image is being forcefully resized, so manipulating the DOM can be an alternative.

add_action( 'admin_head-upload.php', 'wpse_59182_bigger_media_thumbs' );

function wpse_59182_bigger_media_thumbs() 
{
    ?>
    <script type="text/javascript">
        jQuery(document).ready( function($) {
            $('.wp-list-table img').each(function(){
                $(this).removeAttr('width').css('max-width','100%');
                $(this).removeAttr('height').css('max-height','100%');
            });
            $('.column-icon').css('width', '130px');
        });     
    </script>
    <?php
}

edit by Question asker ( Tom ):

I applied the solution in this question, and these are the results:

result of jquery in upload screen

5
  • 1
    It isn't my planned solution, or as flexible, but it answers the question upt o 130px!
    – Tom J Nowell
    Jul 29, 2012 at 20:55
  • I still gotta learn how to suggest patches to the core, this one would be much welcome, IMO that is... Just out of curiosity, what do you prefer: replacing the column or hack the DOM? And what would you consider flexible?
    – brasofilo
    Jul 29, 2012 at 21:18
  • As I speculated, removing the icon column and putting a new column in its place would let us pick any image size
    – Tom J Nowell
    Jul 29, 2012 at 21:21
  • 130px is fine for me though so don't feel pressed
    – Tom J Nowell
    Jul 29, 2012 at 21:22
  • Nope, not feeling pressed, it was speculation as well. . . . . But surely those 60x60 are almost useless, will incorporate this in my daily hacks :o)
    – brasofilo
    Jul 29, 2012 at 21:33
1

Expanding on brasofilo's solution I used the below to enlarge the thumbnails within the media uploader / gallery

Its far from perfect and needs more time spent - most noticeably with the active draggable area remaining the same as previous when resorting - but if you're dealing with 10's of similar images attached to a single post I found it a huge help as is.

add_action( 'admin_head-media-upload-popup', 'make_media_thumbs_bigger' );

function make_media_thumbs_bigger() 
{
    ?>
    <script type="text/javascript">
        jQuery(document).ready( function($) {

            $('#media-upload img').each(function(){
                $(this).removeAttr('width').css('max-width','100%');
                $(this).removeAttr('height').css('max-height','100%');
            });

            $('#media-upload .media-item').each(function(){
                $(this).removeAttr('style');
            });

            $('#media-upload .media-item ').css('height', '96px');

            $('#media-upload a.describe-toggle-on, #media-upload a.describe-toggle-off').click(function() {
                     $(this).parent().removeAttr('style');
                     $(this).next('TABLE.slidetoggle').find('IMG').removeAttr('style'); 
            });

            $('#media-upload a.describe-toggle-off').click(function() {
                     $(this).parent().css('height', '96px');
            });


        });     
    </script>
    <?php
}
3
  • Considering 3.5 is out within days and revamps the entire media uploader, does this work in 3.5RC3?
    – Tom J Nowell
    Dec 7, 2012 at 16:51
  • no idea sorry - this was just a quick and dirty fix using 3.4.2. Its 90% functional, the remaining 10% to make it perfect could take some time..
    – zeniph
    Dec 10, 2012 at 1:20
  • The hook still works for plugins' upload popup windows, which don't have the new interface. :::: I tried your code, but unfortunately, it messes with the thickbox display, at least in 3.5. :::: I reduced it to the bare minimum. If it helps, update your Answer. Cheers!
    – brasofilo
    Jan 3, 2013 at 0:24
0

What your asking isn't a "simple" fix. If you're serious about getting larger thumbs I'd start by looking at the wp-admin/class-wp-media-list-table.php file, or here in the PHPXref site (Around line 203). You can examine the code to see how it's generated and decide how to adjust it from there

1
  • I know, I kind of did that already and came to the conclusion in my comment. Though i haven't actually attempted that yet so if it works I'll post my own answer
    – Tom J Nowell
    Jul 21, 2012 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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