WordPress 3.5 has been released recently, I used the WordPress Media Upload system via thickbox and window.send_to_editor
for some options in my WordPress theme (backgrounds, logos etc...).
But as you know WordPress has integrated a new Media Manager, I wanted to used this new feature to upload images/files as custom fields. So I spent the morning to find a way to get the wished result.
I found with this solution, which can be useful for some of you. Thanks to give me your feedback on the code or any improvements you have in mind!
HTML Sample:
<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 every settings contained in the attachment
variable you can do a console.log(attachment)
or alert(attachment)
.
Your going about it in a way that was unintended. 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();
});
I found nothing to trigger a custom function if the editor closes. I uses 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
});
}
I modified this code a bit more to make it usable for multiple 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;
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With