WordPress 3.5 download media for your theme options

Question

WordPress 3.5 was recently released, I used the WordPress media file upload system through Thickbox and window.send_to_editor for some options in my WordPress theme (backgrounds, logos, etc.).

But, as you know, WordPress integrated the new Media Manager, I wanted to use this new function to upload images / files as custom fields. So I spent the morning to find a way to get the desired result.

I found with this solution that may be useful for some of you. Thanks for the feedback on the code or any improvements you are planning!

HTML example:

 <a href="#" class="custom_media_upload">Upload</a> <img class="custom_media_image" src="" /> <input class="custom_media_url" type="text" name="attachment_url" value=""> <input class="custom_media_id" type="text" name="attachment_id" value=""> 

JQuery Code:

 $('.custom_media_upload').click(function() { var send_attachment_bkp = wp.media.editor.send.attachment; wp.media.editor.send.attachment = function(props, attachment) { $('.custom_media_image').attr('src', attachment.url); $('.custom_media_url').val(attachment.url); $('.custom_media_id').val(attachment.id); wp.media.editor.send.attachment = send_attachment_bkp; } wp.media.editor.open(); return false; }); 

If you want to see all the settings contained in the attachment variable you can do console.log(attachment) or alert(attachment) .

Answer 1

Remember to use wp_enqueue_media (new in 3.5) if you are not on the message editing page

To use the old boot box, you can do this:

 if(function_exists( 'wp_enqueue_media' )){ wp_enqueue_media(); }else{ wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } 

Answer 2

For this happens unintentionally. Your javascript code should probably look something like this:

 $('.custom_media_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Title', button: { text: 'Custom Button Text' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.custom_media_image').attr('src', attachment.url); $('.custom_media_url').val(attachment.url); $('.custom_media_id').val(attachment.id); }) .open(); }); 

Answer 3

I modified this code a bit to make it suitable for several fields at once:

HTML:

 <!-- Image Thumbnail --> <img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px 10px 0px 0px; display:inline-block;" /> <!-- Upload button and text field --> <input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;"> <a href="#" class="button custom_media_upload">Upload</a> 

JQuery

 jQuery(document).ready(function($){ $('.custom_media_upload').click(function() { var send_attachment_bkp = wp.media.editor.send.attachment; var button = $(this); wp.media.editor.send.attachment = function(props, attachment) { $(button).prev().prev().attr('src', attachment.url); $(button).prev().val(attachment.url); wp.media.editor.send.attachment = send_attachment_bkp; } wp.media.editor.open(button); return false; }); }); 

Answer 4

I did not find anything to call a user-defined function if the editor closes. I use this:

 wp.media.editor.open(); $('.media-modal-close, .media-modal-backdrop').one('click', function(){ //do some stuff }); 

or better:

 var id = wp.media.editor.id(); var editor = wp.media.editor.get( id ); if('undefined' != typeof( editor )) editor = wp.media.editor.add( id ); if ( editor ) { editor.on('close', function(){ //do some stuff }); } 

Answer 5

I did not have much chance to play with this, but for those who want to use the gallery element, this code should set you in your path.

This is just the starting point - it provides only a list of image identifiers, separated by commas, but this should be enough to start the work.

 <input id="custom_media_id" type="text" name="attachment_id" value=""> <a href="#" class="button custom_media_upload" title="Add Media">Add Media</a> <script type="text/javascript"> jQuery('.custom_media_upload').click(function() { var clone = wp.media.gallery.shortcode; wp.media.gallery.shortcode = function(attachments) { images = attachments.pluck('id'); jQuery('#custom_media_id').val(images); wp.media.gallery.shortcode = clone; var shortcode= new Object(); shortcode.string = function() {return ''}; return shortcode; } jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445 wp.media.editor.open(); return false; }); </script> 

This will fill the input field with a comma-separated list of image identifiers in the order in which they were set in the editor (using the new drag and drop functions).

The function expects that a short code will be sent for placement in the main editor, but we do not want to do this, so we create a new object that returns an empty string for insertion.

Also note that this does not apply to inserting a single image, as described above - it simply fits into the message editor. Therefore, try to combine the two listeners or delete the corresponding tabs.

EDIT

After spending some time looking at the kernel, I think that the whole process can be simplified using the technique here , but as you read, I have not yet figured out how to pre-select images when re-opening the media manager.