web-dev-qa-db-fra.com

Commentaire: JQuery plusieurs boutons d'éditeur de média wordpress dans la même page d'options?


Je souhaite appeler WordPress Media Uploader avec un bouton dans la page des options de thème. Le fait est que j'ai besoin de trois boutons de média de téléchargement sur la même page. J'essaie de le faire en utilisant le sélecteur jQuery à plusieurs identifiants. Le code fonctionne bien: je clique sur le bouton et l'utilitaire de téléchargement de média est lancé. Toutefois, lorsque je télécharge quelque chose dans le premier champ de saisie, le média que je viens de télécharger est transmis aux autres champs de saisie de la page. Comme s'ils étaient liés ensemble. Désolé pour la question stupide, je ne connais pas beaucoup JavaScript. Mais de toute façon, comment puis-je résoudre ce problème?

jQuery(document).ready(function( $) {
var mediaUploader;
$('#upload-button-1, #upload-button-2, #upload-button-3').on('click', function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Upload', 
button: {
    text: 'Upload'
},
multiple: false
});

mediaUploader.on('select', function () {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);
$('.favicon-preview, .gravatar-preview, .thumbnail-preview')
.css('background','url(' + attachment.url + ')');

});

mediaUploader.open();

});
});
theme-developmentjqueryjavascripttheme-options
1
Lola Bittencourt

Pour le moment, vous affectez l'élément de média sélectionné aux trois entrées de la ligne suivante:

j('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

Afin de ne transmettre la valeur qu'à l'un d'entre eux, vous devez modifier cette ligne pour répondre à un type de marqueur défini dans les boutons. Dans l'exemple ci-dessous, j'ai défini un attribut data dans le bouton qui est référencé dans le javascript.

Donc, en supposant que vous ayez ce code HTML:

<!-- upload buttons -->
<input type="button" class="upload-button" data-target="input_1" value="Upload button 1" />
<input type="button" class="upload-button" data-target="input_2" value="Upload button 2" />
<input type="button" class="upload-button" data-target="input_3" value="Upload button 3" />

<!-- inputs to receive the value -->
<input type="text" id="input_1" value="" />
<input type="text" id="input_2" value="" />
<input type="text" id="input_3" value="" />

Vous pouvez maintenant le faire dans le js:

jQuery(function($) {

    $(document).ready(function () {

            var mediaUploader;

            // we can now use a single class name to reference all upload buttons
            $('.wp-admin').on('click', '.upload-button', function(e) {

                e.preventDefault();                

                // store the element that was clicked for use later
                trigger = $(this);

                if( mediaUploader ){
                    mediaUploader.open();
                    return;
                }

                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Upload', 
                    button: {
                        text: 'Upload'
                    },
                    multiple: false
                });

                mediaUploader.on('select', function() {

                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // we're replacing this line:
                    //$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

                    // assign the value of attachment to an input based on the data-target value
                    // of the button that was clicked to launch the media browser
                    $('#' + trigger.data('target') ).val(attachment.url);

                    $('.favicon-preview, .gravatar-preview, .thumbnail-preview').css('background','url(' + attachment.url + ')');
                });

                mediaUploader.open();

            });            

    });

});

METTRE À JOUR

En fonction du code que vous avez collé, vous pouvez le rendre beaucoup plus efficace comme ceci:

function sweetlola_images(){

    $imgs = array(
        'gravatar'  => 'img_1',
        'thumbnail' => 'img_2',
    );

    foreach( $imgs as $name => $id ){

        // get the image
        $url = esc_attr( get_option( $name ) );

        // if there isn't one, set $gravatar as empty string
        $url = $url ? $url : '';

        //upload button
        echo '<input type="button" data-target="' . $id . '"  value="Upload" class="button button-secondary upload-button" />';

        //input text field
        echo '<input type="text" id="' . $id . '" name="' . $name . '" value="' . $url . '" />';

        if( empty( $url ) ){ //if the value is empty this will show a just the upload button
            echo '<input type="button" value="Remove" data-remove_target="' . $id . '" class="button button-secondary" />';
        }

        // note
        echo '<p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; 

    }
}

Placez vos trois types d’images dans le tableau $imgs et générez-les tous avec une seule fonction.

0
shahar

J'ai en fait le code HTML dans une fonction php:

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){ //if the value is empty this will show a just the upload button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload buton
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';//input text field
} else { //otherwise it will show an upload and a remove button
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" /> //upload button
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" /> //input text field
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" /><p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; //remove button
}
}

function sweetlola_blog_gravatar(){
$gravatar = esc_attr( get_option( 'gravatar_img' ));
if ( empty ($gravatar) ){
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-2" class="button button-secondary" />
<input type="text" id="preview-grav" name="gravatar_img" value="'.$gravatar.'" />
<input type="button" value="Remove" id="remove-button-2" class="button button-secondary" />
<p><i>Idem.<br />Resolução: 89px X 89px</i></p>';
}
}

function sweetlola_blog_thumbnail(){
$thumbnail = esc_attr( get_option( 'thumbnail_img' ));
if ( empty ($thumbnail) ){
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="" />
<p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
} else {
echo '<input type="button" value="Upload" id="upload-button-3" class="button button-secondary" id="upload-button-3" />
<input type="text" id="preview-thumb" name="thumbnail_img" value="'.$thumbnail.'" />
<input type="button" value="Remove" id="remove-button-3" class="button button-secondary" /><p><i>Resolução-mínima(imagens menores<br /> ficarão desfocadas): 118px X 118px</i></p>';
}
}
0
Lola Bittencourt