Thickbox hacking – removing fields

by

Default (big and ugly) Thickbox

I don’t like how this Thickbox’s page looks at all, I almost never use all these settings fields so decided to get rid off them, at least on pages where I’m uploading images as theme options.
enter image description here

A (very) simple Thickbox

Using attachment_fields_to_edit & media_upload_tabs filters I made it look much simpler:
enter image description here

If you’re wondering how to do that (these filters/hooks are poorly explained), here’s the code:

function thickbox_fields($form_fields, $post){
    unset(
       $form_fields['post_title'], //disables "Title" field and so forth...
       $form_fields['url'] );
       $form_fields['image_alt'], 
       $form_fields['post_excerpt'], 
       $form_fields['post_content'], 
       $form_fields['align'], 
       $form_fields['image-size'], 
    );

    return $form_fields;
}

function thickbox_upload_init(){
    add_filter('attachment_fields_to_edit', 'thickbox_fields', 10, 2);
}

add_action('admin_init', 'thickbox_upload_init');

The trouble

Unfortunately after deleting image-size and url fields I’m not sure how to overwrite its values with desired content (in this case the url and image-size set to “full”, always).

I’m uploading things based on this simple yet powerful tutorial using this code on admin page:

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
 formfield = jQuery('#upload_image').attr('name');
 tb_show('', 'media-upload.php?type=image&TB_iframe=true');
 return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src'); //imgurl is always empty after deleting url field
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});

And as comment states imgurl = jQuery('img',html).attr('src') is just empty, in addtion when I disable just image-size and leave url alone – its size is always set to “medium”, any ideas how to fix that?

I was trying to pass URL and image-size like this:

 function thickbox_fields($form_fields, $post){
        unset(
           $form_fields['post_title'], //disables "Title" field and so forth...
           $form_fields['url'] );
           $form_fields['image_alt'], 
           $form_fields['post_excerpt'], 
           $form_fields['post_content'], 
           $form_fields['align'], 
           $form_fields['image-size'], 
        );

        $form_fields['url'] = 'not sure how to get the url here, but this doesnt work anyways';
        $form_fields['image-size'] = 'full'; //yup, this also doesn't work at all

        return $form_fields;
    }

I know these fields are arrays, but $form_fields['image-size'] = array('size' => 'full'), doesn’t work either.

Any hints?

TL;DR – how to hide url and image-size fields from Thickbox and then send value of url field’s to front-end? Also, how to force Thickbox to upload files as “full”, because with image-size unset it returns links to medium-sized uploads all the time.

I guess image_size_input_fields filter could be helpful.

1 Answer
1

Tricky but once you understand how WordPress sets the sizes and the fields then the rest is easy:

function thickbox_fields($form_fields, $post){
    unset(
        $form_fields['post_title'], //disables "Title" field and so forth...
        $form_fields['url'],
        $form_fields['image_alt'], 
        $form_fields['post_excerpt'], 
        $form_fields['post_content'], 
        $form_fields['align'], 
        $form_fields['image-size']
    );

    //create the size input for full only and set display to none
    $size="full";
    $css_id = "image-size-{$size}-{$post->ID}";
    $html = "<div style="display: none;" class="image-size-item"><input type="radio" name="attachments[$post->ID][image-size]" id='{$css_id}' value="{$size}"checked='checked' /></div>";
    //set as image-size field
    $form_fields['image-size'] = array(
        'label' => '', //leave with no label
        'input' => 'html', //input type is html
        'html' => $html //the actual html
    ); 

    return $form_fields;
}

First you remove all unwanted fields, then you mimic the way WordPress creates the sizes field but only with full as the selected option and you hide that using display:none

and then you add it to the fields array in the way WordPress Accepts and as you can see its not just a simple string but an array of parameters (label,input,html)

Now for the real question: who is the girl in the image???

Leave a Comment