Using WP’s ThickBox in a plugin

  • Hello all,

    I’ve been attempting to create a plugin options page which allows the end user to upload images (and eventually other types of files) using the in-built media uploader. I’ve tried following several tutorials (including : https://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/#comment-11610 ) and have nearly got it working perfectly.

    I have managed to get the media uploader to pop up in the thickbox as per ‘usual’ (I’m trying to get the plugin to feel native to WordPress, hence my desire to get it working like this).

    The code worked as expected in version 3, apart from one small thing – when the thickbox opens, the ‘insert into post’ button isn’t present on the ‘From Computer’ tab. If I go ahead and upload something and then switch to the ‘media library’ tab and then click on ‘show’ the ‘insert into post’ button is displayed. However, on the ‘From Computer’ tab only the ‘save all changes’ button appears.

    The reason why I’m needing the ‘insert into post’ button is because I’m hijacking the window.send_to_editor function which is called when someone clicks that button.

    If you follow the link above you’ll see the entire code I’m using and it seems that this used to work prior to version 3.0.

    I’ve tried playing around with the URL that is used to call the thickbox and have found the following things:

    tb_show('Test', 'media-upload.php?type=image&TB_iframe=1');

    When this is clicked, the thickbox opens on the ‘from computer’ tab. Intermittently the ‘choose files’ button doesn’t display and a click on the ‘From Computer’ tab is needed to get this button to display. When that is clicked a file can be uploaded. Once a file is uploaded the information about the image is displayed and at the bottom of that information (where normally, when using the media uploader in a post, there is ‘insert into post’, ‘use as default image’ and ‘delete permanently’ ) there is only an option to ‘delete’. Below that, at the bottom of the iframe is the ‘save all changes’ button.

    tb_show('Test', 'media-upload.php?type=image&tab=library&TB_iframe=true');

    When this code is used the iframe loads on the library tab as you’d expect. The reason I tested this is because of the problems with the seemingly intermittent display of the ‘select files’ button. The same problem as described above persists whereby the ‘insert into post’ button is not displayed.

    tb_show('Test', 'media-upload.php?post_id=9999&type=image&TB_iframe=1');

    Finally, I tried this whereby I noticed that when you’re using the media uploader in the posts screen (normal usage) there is a post_id parameter – so I tried putting in an arbitrary number.

    This loads the thickbox as normal, on the ‘from computer’ tab and functions exactly as the first chunk of code above. The only difference is that, when an image is uploaded, when the information about that image is displayed the ‘use as featured image’ link is now present as well as the ‘delete’ and ‘save all changes’ button below those. However, the ‘insert into post’ link isn’t displayed – much to my dismay ??

    Apologies for the long post, I wanted to be as thorough as possible and explain what I’ve done as clearly as I could. If anyone is able to shed some light(box … har har) as to why the ‘insert into post’ button is not displayed I would be very appreciative.

    Alternatively, if someone could tell me how I can hijack the function that runs when the ‘save all changes’ button is clicked instead, that would do the trick although from a brief look at the code, it looks like that button actually processes the form and doesn’t run a js function.

    I’ve tried injecting some html into the overlay but had absolutely no luck with that at all as I was unable to determine when the thichbox had finished loading (if you run some js on the click handler for the ‘upload image’ button, the thickbox hasn’t loaded so you can’t inject anything into the iframe as it doesn’t exist in the DOM yet)

    Thanks very much in advance for a) reading all my drivel and b) any answers that are forthcoming.

Viewing 16 replies (of 16 total)

  • I’ve used a different approach. On my own plugin I was having a lot of problems with jQuery(document).ready(function () ) — since I was using already a lot of other jQuery based snippets from various sources, each initialising things on their own, so the whole code didn’t work.

    My solution was to add a onclick event directly on the button’s HTML:

    <input id="upload_image" name="upload_image" type="text" />
  <input id="upload_image_button" value="Get image" type="button" onclick="myMediaPopupHandler();" />

    and then add to the header (via WP’s add_action(“admin_print_scripts-XXX”, “myHandler”) mechanism) the following snippet:

    <script type="text/javascript">
// Deals with calling the WordPress Media popup box
function myMediaPopupHandler()
{
	window.send_to_editor = function(html) {
		imgurl = jQuery('img',html).attr('src');
		jQuery('#upload_image').val(imgurl);
		tb_remove();
	}

	formfield = jQuery('#upload_image').attr('name');
	tb_show('', '<?php echo admin_url(); ?>media-upload.php?type=image&tab=library&TB_iframe=true');
	return false;
}
</script>

    I felt is was overkill to add a whole file for such a tiny bit of code ??

    Works like a charm under WP 3.1.3 and 3.2 Beta 2. Even the NextGen Gallery sometimes works (it’s a bit erratic though); Flash uploading and selecting existing files works flawlessly.

Viewing 16 replies (of 16 total)
  • The topic ‘Using WP’s ThickBox in a plugin’ is closed to new replies.