Vous utilisez Wordpress 3.5 Media Uploader dans la méta-boîte?

16

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.

ÉDITER

Ceci 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;
});
});
soupeureux
la source

Réponses:

9

Pour vous aider à démarrer, les fonctions de base et les substitutions pour autant que je sache actuellement.Il pourrait y avoir de meilleures solutions, mais je n'ai eu que deux jours avec 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 une 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, posez-les simplement.

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 fermeture de la lightbox?

// add listener: 
wp.media.view.Modal.prototype.on('close', function(){ console.log('triggered close'); }
ungestaltbar
la source
Merci! Je n'arrive pas à le faire fonctionner cependant. J'ai collé ce que j'utilisais pour l'ancien téléchargeur de médias ci-dessus, si cela aide.
souporserious
Ipstenu et l'équipe d'assistance ont établi une liste principale des problèmes ( wordpress.org/support/topic/… ) signalés pour WordPress 3.5. Ce fil n'est pas destiné à recevoir des commentaires des utilisateurs, mais est un fil organisé qui met rapidement en évidence les problèmes connus signalés ainsi que des instructions sur la façon de résoudre le problème.
Tara
Comment puis-je écouter l'événement de fermeture de la lightbox? Je dois déclencher une fonction personnalisée si quelqu'un ne choisit pas une nouvelle image
Xaver
3
// ajouter un écouteur: wp.media.view.Modal.prototype.on ('close', function () {console.log ('triggered close');}
ungestaltbar
6

Voici un petit tutoriel sur la façon d'utiliser le téléchargeur de médias WP 3.5 dans les options de thème. C'est ce que j'ai trouvé et cela fonctionne parfaitement pour moi. Faites-moi savoir si vous trouvez une meilleure solution.

Voici comment j'ai implémenté le code dans mes options de 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 de post-édition. Pour le faire fonctionner sur la page d'options de thème, vous devez ajouterwp_enqueue_media();

Ram Ratan Maurya
la source
que se passe-t-il si vous ne fournissez qu'une sélection d'image unique et non multiple?
Mehul Kaklotar
3

Je fais presque la même chose ce 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 toute taille) à l' <input>élément.
J'essaie de le faire comme paramètre et cela fonctionne, seul ce dont j'ai besoin maintenant est un moyen fiable d'envoyer l'ID de pièce jointe au<input>

janw
la source
Merci beaucoup sooooooooooooooooooo !!!! Cela a finalement fonctionné après 2 jours de chasse désespérée pour la solution !!! Merci beaucoup!!!
Devner
vous voudrez peut-être jeter un œil au code source de ceci dans mon plugin: wordpress.org/extend/plugins/default-featured-image
janw
3

Je pense que @janw a tout à fait raison, mais je n'ai pas réussi à faire fonctionner une chose. Jan insère le bouton de la bibliothèque multimédia en utilisant:

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 multimédia de cette manière n'assigne pas un identifiant "default_featured_image_button" au lien. En fait, il n'ajoute aucun identifiant sur le lien inséré. Voici donc ce que j'ai fait pour le faire fonctionner.

J'ai ajouté cette ligne à ma fonction de rappel de meta box 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 remarquerez que j'ai utilisé des variables pour stocker le nom et l'id du champ de saisie juste avant le lien qui appelle le jQuery. De cette façon, ce code peut être utilisé à plusieurs reprises sur la même page. Vous auriez juste besoin d'assigner une classe à tous les boutons ou d'utiliser des identifiants individuels pour les boutons de votre jquery comme je l'ai fait. J'espère que cela aide quelqu'un comme la réponse de Jan m'a aidé.

MatthewLee
la source
0

Je sais que c'est un ancien post, mais je veux juste partager mes conclusions:

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

wp.media.editor.open();

l'éditeur de médias va essentiellement vérifier pour tinyMCE editor ( window.tinymce), puis Quicktags ( window.QTags), pour transmettre le contenu à.

Pour mon approche pour obtenir le contenu, j'ai assigné window.QTagsavec un objet personnalisé, qui a une insertContent()méthode:

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

sanusi
la source