Question

I’m trying to build an admin settings page that will allow users to upload an image for their logo. I’m using this tutorial: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/

I’ve changed it to add the scripts to enqueue rather than print as is now best practice. My code is as follows:

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/bigg-options.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'bigg_options') {
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_styles', 'my_admin_styles');
}

And the Javascript:

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');
 jQuery('#upload_image').val(imgurl);
 tb_remove();
}

});

It works, and the media upload window opens. But instead of it being a thickbox popup in the middle of the screen, as is normal, it appears at the bottom of the page, off to the left and partially obscured. Here’s a screen shot of where it goes:

Any ideas on why it is doing this, and how to get it to position properly?

Answer 1

Use &modal=true in your tb_show():

tb_show('', 'media-upload.php?type=image&modal=true');

I believe you’ll also need to add in a width and height.