4

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

4

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

1
  • To be honest I was trying to mimic this field at first, but didn't know what do to with "html" element as var_dump was returning rendered html elements instead of raw data. And unfortunately, I don't know who the girl is, here's the original pic of her - i.imgur.com/gRasY.jpg :) Thanks a lot, and by the way where's Thickbox code stored within WordPress? I'm browsing media.php/media-upload.php but couldn't find anything like the code provided by you. I'd love to do the same trick with url and maybe hide "Save all changes" button. Feb 19, 2012 at 2:41

Your Answer

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

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