Utilisation de Wordpress 3.5 Media Uploader dans la boîte méta?

14

Est-ce possible de le faire?

J'aime le fonctionnement du nouveau dispositif de téléchargement. Je suppose que cela a à voir avec un appel jQuery comme l’autre façon.

EDIT

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;
});
});
    
posée souporserious 12.12.2012 - 01:37

5 réponses

9

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 3.5 pour le moment:

// 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 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é.

Extrait 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'); }
    
réponse donnée ungestaltbar 12.12.2012 - 07:35
6

Voici un petit tutoriel sur comment utiliser l'utilitaire de téléchargement de média WP 3.5 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;

  });
});

Mettre à jour

Ce code ne fonctionne que sur la page de post-modification. Pour que cela fonctionne sur la page d'options de thème, vous devez ajouter wp_enqueue_media();

    
réponse donnée Ram Ratan Maurya 13.12.2012 - 08:05
3

Je fais presque pareil, il n'est pas encore prêt, mais ça marche:

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&amp;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) vers l'élément <input> .
J'essaie de le faire en tant que paramètre et que cela fonctionne. Ce n'est que parce que j'ai maintenant besoin d'un moyen fiable d'envoyer l'ID de pièce jointe à <input>

    
réponse donnée janw 14.12.2012 - 14:32
3

Je pense que @janw a tout à fait raison, mais j’ai été incapable 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 à l'aide de:

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 manière 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 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, avec:

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 remarquerez 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 aidera quelqu'un comme me l'a fait la réponse de Jan.

    
réponse donnée MatthewLee 13.03.2013 - 20:48
0

Je sais qu'il s'agit d'un ancien post, mais je veux simplement partager mes découvertes:

Pour ouvrir l'éditeur de média, nous appelons cette fonction

wp.media.editor.open();

l'éditeur de média recherchera essentiellement l'éditeur tinyMCE ( window.tinymce ), puis les balises rapides ( window.QTags ), auxquelles le contenu sera transmis.

Pour que mon approche obtienne le contenu, j'ai affecté window.QTags à un objet personnalisé, qui possède 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

    
réponse donnée user3323765 28.11.2015 - 12:00

Lire d'autres questions sur les étiquettes