web-dev-qa-db-fra.com

L'ajout du téléchargement de média dans les options personnalisées

J'ai créé une page d'options de site personnalisée en tant que page d'administration de niveau supérieur dans mon thème. Les options sont assez basiques mais incluent quelques images.

Au départ, j'ai trouvé beaucoup d'exemples d'utilisation de Media Uploader pour télécharger ou sélectionner une image sur la page des options. Il était assez facile à mettre en œuvre et fonctionnait à merveille, mais avait des résultats extrêmement indésirables.

Même si je pouvais invoquer le modal d'éditeur de média et rajouter des images dans ma page d'options personnalisées, le message "Insérer dans la publication" était rompu sur toutes les autres facettes de WP. Toutes les publications, publications personnalisées et pages ne pouvaient plus recevoir aucune chaîne de Media Uploader lorsque je cliquais sur "Insérer dans la publication".

Je pense que cela doit être lié à la fonction window.send_to_editor, voici le code javascript avec lequel j’appelais Media Uploader (je l’ai trouvé sur de nombreux sites Web):

jQuery(document).ready(function($) {

$('#upload_header_img_button').click(function() {
    formfield = $('#header_image');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

$('#upload_branding_img_button').click(function() {
    formfield = $('#branding_image');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    imgurl = $(html).attr('href');
    $(formfield).val(imgurl);
    tb_remove();
    var img_preview = $(formfield).parent().find('img');
    console.log(img_preview);
    img_preview.attr('src',imgurl);
}
});

Après avoir beaucoup fouillé (lire: recherche dans les commentaires) , j'ai trouvé cette fonction , ce qu'un lecteur a proposé comme solution possible: https://dpaste.de/T8ji et l'a ajouté après ma fonction window.send_to_editor. Cela a fonctionné, comme dans tous mes messages et pages avait retrouvé la fonctionnalité "Insérer dans le message", mais maintenant le Media Uploader est cassé sur ma page d'options personnalisées.

Quelqu'un at-il couru dans cela?

uploadsadmin-menumedia-modal
1
frankV

Je viens de courir dans cela. La raison en est que vous substituez la fonction window.send_to_editor à une autre. WordPress utilise cette fonction pour insérer des galeries et autres éléments. Ainsi, maintenant que vous l'avez modifiée, ce n'est plus le cas.

Idéalement, "vous souhaitez utiliser un événement déclenché par le programme de téléchargement de média au lieu de simplement remplacer la fonction, ou du moins de le remplacer temporairement lors de la sauvegarde, quelque chose comme ceci (l'administrateur wp utilise underscore.js):

myBtn.on('click', function() { 
    var bkSend = _.clone(window.send_to_editor); // we need a copy 

    //... My code

    window.send_to_editor = function(html) { 
        //... My custom things

        restore();
    } 

    function restore() { 
         window.send_to_editor = bkSend;
    }
});

Non testé.

Ok, donc une version testée et fonctionnelle pour mon cas: 

    (function($) {
        $(document).ready(function() {
            $('#upload_image_button').on('click', function(e)  {

                e.preventDefault();
                e.stopPropagation();

                tb_show('', 'media-upload.php?post_id=<?php  echo $post->ID; ?>&type=image&amp;TB_iframe=true');

                var bkSend = _.clone(window.send_to_editor);

                var restore = function(callBack) { 

                    window.send_to_editor = _.clone(bkSend);

                    callBack();
                };

                //console.log(bkSend);

                window.send_to_editor = function(html) {


                    imgurl = $(html).find('img').attr('src');

                    $('#lc-slider-image')[0].src = imgurl;
                    $('#lc_slider_image').val(imgurl);

                    restore(tb_remove);    

                };

                //console.log(window.send_to_editor);
            });
        });
    })(jQuery);

J'espère que cela aidera certaines des victimes de cet épouvantable blog qui a déclenché toute cette folie.

Je suis trop occupé pour embellir ce code et il pourrait certainement être mieux alors si quelqu'un pouvait m'aider avec ça, ce serait génial.

1
Alain Jacomet Forte