Utilisation de Wordpress 3.5 Media Uploader dans la boîte à méta?
Est-ce possible?
J'adore le fonctionnement du nouvel uploader. Je suppose que cela a à voir avec un appel jQuery comme l’a fait l’autre façon.
MODIFIER
C'est le code que j'utilise actuellement
jQuery(document).ready(function($) {
$('.custom_upload_image_button').click(function() {
imageField = $(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
});
window.send_to_editor = function(html) {
imgurl = $(html).attr('href');
$(imageField).val(imgurl);
tb_remove();
};
$('.clear_field').click(function() {
var defaultImage = jQuery(this).parent().siblings('.custom_default_image').text();
jQuery(this).parent().siblings('.custom_upload_image').val('');
return false;
});
});
Pour commencer, les fonctions de base et les remplacements, pour autant que je sache actuellement. Il existe peut-être de meilleures solutions, mais je n'ai eu que deux jours avec la version 3.5:
// open modal - bind this to your button
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor )
wp.media.editor.open( ##unique_id_here## );
// backup of original send function
original_send = wp.media.editor.send.attachment;
// new send function
wp.media.editor.send.attachment = function( a, b) {
console.log(b); // b has all informations about the attachment
// or whatever you want to do with the data at this point
// original function makes an ajax call to retrieve the image html tag and does a little more
};
// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility
// backup original window.send_to_editor
window.original_send_to_editor = window.send_to_editor;
// override window.send_to_editor
window.send_to_editor = function(html) {
// html argument might not be useful in this case
// use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
}
Ce n'est pas une réponse de travail complète. Vous devez définir et garder trace de vos champs de saisie par vous-même, etc. Cela devrait vous aider à démarrer. Si vous avez des questions plus concrètes, il suffit de demander.
Et assurez-vous de réaffecter les fonctions d'origine lorsque votre script est terminé.
Tiré des commentaires:
Comment puis-je écouter l'événement de clôture de la lightbox?
// add listener:
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
Voici un petit tutoriel sur la façon d'utiliser WP 3.5 Media Uploader dans les options de thème. C'est ce que je suis venu avec et cela fonctionne parfaitement pour moi. Faites-moi savoir si vous trouvez une meilleure solution.
Voici comment j'ai implémenté le code dans les options de mon thème:
jQuery(document).ready(function($){
$('.stag-metabox-table .button').click(function(e){
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
var id = button.attr('id').replace('_button', '');
wp.media.editor.send.attachment = function(props, attachment){
$("#"+id).val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open(button);
return false;
});
});
Mise à jour
Ce code ne fonctionne que sur la page d'édition post. Pour que cela fonctionne sur la page d'options de thème, vous devez ajouter wp_enqueue_media();
Je fais presque pareil ce n'est pas encore prêt mais ça fonctionne:
dans le php:
<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // second argument is the same as the `<input>` id
Le javascript:
jQuery('#default_featured_image_button').click(function () {
var formfield = jQuery('#default_featured_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function (html) {
var imgurl = jQuery('img', html).attr('src');
console.log(jQuery('img', html));
console.log(html);
console.log(imgurl);
// set the url as the value
jQuery('#default_featured_image').val(imgurl);
tb_remove();
};
Cela vous permettra de télécharger et d'envoyer l'URL de l'image (de n'importe quelle taille) à l'élément <input>.
J'essaie de le faire en tant que paramètre, et cela fonctionne. Ce n'est que ce dont j'ai besoin maintenant est un moyen fiable d'envoyer l'ID de pièce jointe au <input>
Je pense que @janw a tout à fait raison, mais je n’étais pas capable de faire fonctionner une chose. Jan insère le bouton de la bibliothèque multimédia à l'aide de:
do_action( 'media_buttons', 'default_featured_image' );
puis préempte l'action par défaut en utilisant:
jQuery('#default_featured_image_button').click(function () {...
Le problème que j'ai rencontré est que l'insertion d'un bouton de média de cette façon n'attribue pas un identifiant de "default_featured_image_button" au lien. En fait, il n’ajoute aucun identifiant sur le lien inséré. C'est donc ce que j'ai fait pour que cela fonctionne.
J'ai ajouté cette ligne à la fonction de rappel de la boîte à méta juste après mon champ de saisie:
<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />
J'ai ensuite mis en file d'attente mon fichier jquery personnalisé et le fichier css thickbox, également dans mon fichier functions.php, en utilisant:
add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');
function jhsir_load_image_set_js() {
wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
wp_enqueue_style( 'thickbox' );
}
Enfin, mon fichier image-set.js comprenait les éléments suivants:
jQuery(document).ready(function($) {
var formfield = null;
$('#upload_logo_button, #upload_background_button').click(function() {
$('html').addClass('Image');
formfield = $(this).prev('input').attr('name');
formfield_id = $(this).prev('input').attr('id');
tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
return false;
});
// user inserts file into post.
// only run custom if user started process using the above process
// window.send_to_editor(html) is how wp normally handles the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function( html ) {
var fileurl;
if(formfield != null) {
fileurl = $( 'img', html).attr('src');
$( "#" + formfield_id ).val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});
Vous noterez que j'ai utilisé des variables pour stocker le nom et l'id du champ de saisie situé juste avant le lien qui appelle jQuery. De cette façon, ce code peut être utilisé à plusieurs reprises sur la même page. Il vous suffira d'assigner une classe à tous les boutons ou d'utiliser des identifiants individuels pour les boutons de votre requête, comme je l'ai fait. J'espère que cela aide quelqu'un comme me l'a fait la réponse de Jan.
Je sais que ceci est un ancien post, mais je veux juste partager mes découvertes:
Pour ouvrir l'éditeur de média, nous appelons cette fonction
wp.media.editor.open();
l’éditeur de média va essentiellement rechercher l’éditeur tinyMCE (window.tinymce), puis les balises rapides (window.QTags), auxquelles transmettre le contenu.
Pour que mon approche obtienne le contenu, j'ai assigné window.QTags avec un objet personnalisé, qui a une méthode insertContent():
var newObject = {
insertContent: function(html){
// to extract the image source
$(html).find('img').attr('src');
}
}
// assign the newObject to window.QTags property
window.QTags = newObject;
Référence: phpxref