it-swarm.com.de

So ändern Sie wp.media, um mehrere Bilder abzurufen und anzuzeigen

Mein jQuery-Skript funktioniert einwandfrei, wenn Sie den wp.media-Uploader öffnen, ein einzelnes Bild auswählen oder hochladen, das Bild anzeigen und seine Anhangs-ID über eine versteckte Eingabe (auf der Seite mit den Plug-In-Einstellungen) zu einem vorhandenen Options-Array hinzufügen möchten. Mein Ziel ist es, die identischen Ergebnisse wiederzugeben, aber für mehrere Bilder gleichzeitig .

Wie viele vor mir habe ich die Verwendung von wp.media für solche Zwecke blockiert.

Zuerst präsentiere ich das vollständige Arbeitsskript: Es öffnet den Medienrahmen, ermöglicht mir die Auswahl eines Bildes, erfasst die ID des Bildanhangs für die verborgene Eingabe (die wichtigste Funktion) und liefert zufällig ein Vorschaubild vor einem Speichern Sie die Aktion, die beim Aktualisieren der Seite das Bild über seine Anhang-ID genau dort anzeigt, wo ich es haben möchte. Das meiste davon ist jedem bekannt, der Routinen für die Verwendung von wp.media recherchiert und geschrieben hat, und diese spezielle Verwendung (abgesehen von den Besonderheiten des Setups meines Plugins) ist mittlerweile gut dokumentiert, zumindest im Vergleich zur Verwendung mehrerer Dateien .

EINZELBILD-CODE ARBEITEN

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

    var myplugin_media_upload;

    $('#myplugin-change-image').click(function(e) {
        e.preventDefault();

    // If the uploader object has already been created, reopen the dialog
        if( myplugin_media_upload ) {
            myplugin_media_upload.open();
            return;
        }

    // Extend the wp.media object
        myplugin_media_upload = wp.media.frames.file_frame = wp.media({
            title: button_text.title,
            button: { text: button_text.button },
            multiple: false
        });

    //When a file is selected, grab the URL and set it as the text field's value
        myplugin_media_upload.on( 'select', function() {
            attachment = myplugin_media_upload.state().get( 
                 'selection' ).first().toJSON();
            console.log(attachment); //irrelevant to functionality but useful
            //adds the ID to the hidden input
            $('#myplugin-featured-image').val( attachment.id );
            //provides the preview image
            $('#myplugin-thumbnail').empty();
            $('#myplugin-thumbnail').append( 
                '<img src="' + attachment.url + 
                '" class="attachment-thumbnail myplugin-preview" />' );
            $('#myplugin-new-global').show();
        });

    //Open the uploader dialog
        myplugin_media_upload.open();
    });

});

AM MEISTEN FEHLERHAFTE MEHRFACHBILDER VERSUCHEN

Ich habe hier und da Ausschnitte mehrerer Auswahlroutinen kombiniert und verschiedene Anpassungen ausprobiert. Das folgende Segment eines solchen Versuchs konzentriert sich auf die Tastenfolge. Ich präsentiere es nicht, weil es die Chance hatte, vollständig erfolgreich zu sein, sondern weil es teilweise erfolgreich ist und einige möglicherweise nützliche und interessante Informationen liefert:

// Extend the wp.media object
    myplugin_media_upload = wp.media.frames.file_frame = wp.media({
        title: button_text.title,
        button: { text: button_text.button },
        multiple: true //get multiple images
    });

//When a file is selected, grab the URL and set it as the text field's value
    myplugin_media_upload.on( 'select', function() {
        var selection = myplugin_media_upload.state().get( 'selection' );
        selection.map( function( attachment ) {
            attachment.toJSON();

            //shows each attachment ID:
            console.log(attachment.id);
            //last is captured for:
            $('#myplugin-featured-image').val( attachment.id );

            //captures code fragment (see notes)
            console.log(attachment.url);

        });

    });

Obwohl das letzte, mit "Anhang-Miniaturansicht" zusammenhängende Material aus dem vorherigen Beispiel überhaupt nicht funktioniert und nicht enthalten ist, erfasst dieser Code die letzte Anhang-ID aller ausgewählten Bilder und hängt sie als das an brauchte "val" für die versteckte Eingabe.

Wenn ich auf die Konsole schaue, stelle ich fest, dass tatsächlich viele ausgewählte Bilder ID für ID gesammelt werden. Es stellt sich jedoch heraus, dass sich attachment.url als ein Ausschnitt aus einem fehlerhaften URL-Code registriert, der offenbar von wp-includes/js/backbone.min.js stammt. Vielleicht findet hier jemand einen Hinweis oder zumindest etwas amüsant (!?).

Ich denke, ich möchte die IDs erfassen, während sie belichtet werden, sie in einem Array zusammenstellen und sie in einer anderen Art der Bildanzeige, wahrscheinlich mit inkrementierten HTML-IDs, in einer Schleife wiedergeben, und ich muss ebenfalls in der Lage sein, das Array für zu erfassen PHP Verarbeitung.

Ich bin mir ziemlich sicher, dass ich mit den letzten beiden Teilen (Anzeige und PHP Verarbeitung) fertig werden kann, sobald die Teile "Assemble and Access Array" behandelt wurden, aber zu diesem Zeitpunkt ist meine Einrichtung mit jQuery absolut unzureichend. Es hat zu stundenlangen Fehlversuchen geführt, mit vielen "undefinierten" Hinweisen, wenn ich versuche, auf Variablen zuzugreifen, von denen ich denke, dass sie Arrays von IDs sein sollten. Bisher hat nichts, was ich ausprobiert habe, viel mehr getan, als die Konsole zu dekorieren und mir bestenfalls einen brauchbaren Wert zu geben, wie bereits beschrieben.

Ich hoffe, dass jemand eine Antwort liefern kann, die neben der Lösung dieses speziellen Problems eine funktionierende Vorlage für die Auswahl und Verwendung mehrerer Bilder in Plug-Ins, Designs und Funktionen darstellt.

PPS: Hör auf, ich glaube, ich habe fast eine Antwort, schockierend genug.

Ich wäre trotzdem gespannt, was sich ein echter jQuery-Master ausgedacht hat ...;)

3
CK MacLeod

Das funktioniert also. Ich würde gerne Verbesserungen umsetzen und gutschreiben!

/**
 * @Script: WordPress Multiple Image Selection in jQuery
 * @Version: 0.1
 * @Author: CK MacLeod
 * @Author URI: http://ckmacleod.com
 * @License: GPL3
 */

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

    var myplugin_media_upload;

    $('#myplugin-change-image').click(function(e) {

        e.preventDefault();

        // If the uploader object has already been created, reopen the dialog
        if( myplugin_media_upload ) {

            myplugin_media_upload.open();
            return;

        }

        // Extend the wp.media object
        myplugin_media_upload = wp.media.frames.file_frame = wp.media({

            //button_text set by wp_localize_script()
            title: button_text.title,
            button: { text: button_text.button },
            multiple: true //allowing for multiple image selection

        });

        /**
         *THE KEY BUSINESS
         *When multiple images are selected, get the multiple attachment objects
         *and convert them into a usable array of attachments
         */
        myplugin_media_upload.on( 'select', function(){

            var attachments = myplugin_media_upload.state().get('selection').map( 

                function( attachment ) {

                    attachment.toJSON();
                    return attachment;

            });

            //loop through the array and do things with each attachment

           var i;

           for (i = 0; i < attachments.length; ++i) {

                //sample function 1: add image preview
                $('#myplugin-placeholder').after(
                    '<div class="myplugin-image-preview"><img src="' + 
                    attachments[i].attributes.url + '" ></div>'
                    );

                //sample function 2: add hidden input for each image
                $('#myplugin-placeholder').after(
                    '<input id="myplugin-image-input' +
                    attachments[i].id '" type="hidden" 
                    name="myplugin_attachment_id_array[]"  value="' + 
                    attachments[i].id + '">'
                    );

            }

        });

    myplugin_media_upload.open();

    });

});
5
CK MacLeod