web-dev-qa-db-de.com

Gewusst wie: JQuery mehrere WordPress Media Uploader-Schaltflächen auf derselben Optionsseite?


Ich möchte den WordPress-Medien-Uploader über eine Schaltfläche auf meiner Themenoptionsseite aufrufen. Die Sache ist, dass ich drei Upload-Medien-Buttons auf derselben Seite brauche. Ich versuche das mit jQuery Multiple IDs Selector zu tun. Der Code funktioniert einwandfrei: Ich klicke auf die Schaltfläche und der Medien-Uploader wird gestartet. Wenn ich jedoch etwas in das erste Eingabefeld hochlade, wird das soeben hochgeladene Medium an die anderen Eingabefelder auf der Seite weitergeleitet. Als wären sie zusammengebunden. Entschuldigung für die blöde Frage, ich kenne nicht viel JavaScript. Aber wie kann ich das beheben?

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();

});
});
1

Momentan wird das ausgewählte Medienelement allen drei Eingängen in der folgenden Zeile zugewiesen:

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

Um den Wert nur an einen von ihnen zu übergeben, müssen Sie diese Zeile ändern, um auf eine Art Markierung zu reagieren, die in den Schaltflächen festgelegt wurde. Im folgenden Beispiel habe ich ein data-Attribut in der Schaltfläche festgelegt, auf die im Javascript verwiesen wird.

Angenommen, Sie haben diesen HTML-Code:

<!-- 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="" />

Sie können dies jetzt im js tun:

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();

            });            

    });

});

AKTUALISIEREN

Basierend auf dem Code, den Sie eingefügt haben, können Sie die Effizienz wie folgt steigern:

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>'; 

    }
}

Fügen Sie Ihre drei Bildtypen in das $imgs-Array ein und generieren Sie sie alle mit einer einzigen Funktion.

0
shahar

Ich habe tatsächlich das HTML in einer PHP-Funktion:

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