Aufrufen des WordPress Gallery Uploader/Selector von Metabox

Question 1

Wenn ich auf einem Beitrag/einer Seite auf die Schaltfläche „Medien hinzufügen“ klicke, habe ich die Option „Medien hinzufügen“. Nachdem ich Medien ausgewählt habe, klicke ich auf In Beitrag einfügen, und die Bilder werden eingefügt. Es gibt jedoch eine andere Option, die sich in der linken Seitenleiste befindet. Ich kann auf Galerie erstellen klicken. Der Bildauswahlprozess ist derselbe, aber wenn ich auf „Neue Galerie erstellen“ klicke, wird ein neuer Rahmen angezeigt, in dem ich die Reihenfolge der Bilder bearbeiten kann.

Dieses zweite Fenster ist das, wonach ich suche. Ich rufe den Rahmen aus einer Metabox auf und habe es erfolgreich hinbekommen, dass ich einzelne oder mehrere Bilder erfassen und die IDs als Zeichenfolge speichern sowie Miniaturansichten live in eine Vorschaubox einfügen kann. Ich kann nichts über das Aufrufen des Galerie-Frames finden.

Mein aktueller Code lautet wie folgt:

jQuery('#fg_select').on('click', function(event){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        title: "Select Images For Gallery",
        button: {text: "Select",},
        library : { type : 'image'},
        multiple: true // Set to true to allow multiple files to be selected
    });

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        ids = jQuery('#fg_metadata').val().split(',');
        ids.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        });
    });

    file_frame.on('ready', function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        $( '.media-modal' ).addClass( 'no-sidebar' );
    });

    // When an image is selected, run a callback.
    file_frame.on('select', function() {
        var imageIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('selection');
        images.each(function(image) {
            imageIDArray.push(image.attributes.id);
            imageHTML += '<li><button></button><img id="'+image.attributes.id+'" src="'+image.attributes.url+'"></li>';
        });
        metadataString = imageIDArray.join(",");
        if(metadataString){
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_select').text('Edit Selection');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

    // Finally, open the modal
    file_frame.open();

});

Irgendwelche Ideen?

BEARBEITEN:

Ich habe es bis zu dem Punkt gebracht, an dem es die Galerie direkt aufruft, ohne Seitenleisten usw. Allerdings ignoriert es jetzt den Aufruf on(‘select’). Ich denke, Galerien senden einen anderen Aufruf, wenn sie das Bild auswählen?

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

// Uploading files
var file_frame;

jQuery('#fg_select').on('click', function(event){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        frame: "post",
        state: "featured-gallery",
        library : { type : 'image'},
        button: {text: "Edit Image Order"},
        multiple: true
    });

    file_frame.states.add([
        new wp.media.controller.Library({
            id:         'featured-gallery',
            title:      'Select Images for Gallery',
            priority:   20,
            toolbar:    'main-gallery',
            filterable: 'uploaded',
            library:    wp.media.query( file_frame.options.library ),
            multiple:   file_frame.options.multiple ? 'reset' : false,
            editable:   true,
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true
        }),
    ]);

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        ids = jQuery('#fg_metadata').val().split(',');
        if (!empty(ids)) {
            ids.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            });
        }
    });

    file_frame.on('ready', function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        $( '.media-modal' ).addClass( 'no-sidebar' );
    });

    file_frame.on('change', function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        setTimeout(function(){
            $('.media-menu a:first-child').text('← Edit Selection').addClass('button').addClass('button-large').addClass('button-primary');
        },0);
    });

    // When an image is selected, run a callback.
    file_frame.on('set', function() {
        alert('test');
    });

    // Finally, open the modal
    file_frame.open();

});

BEARBEITEN 2:

Okay, also habe ich alles richtig zum Feuern gebracht. Aber ich kann den ausgegebenen Galeriecode nicht entschlüsseln.

        // When an image is selected, run a callback.
    file_frame.on('update', function() {
        var imageIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('selection');
        images.each(function(image) {
            imageIDArray.push(image.attributes.id);
            imageHTML += '<li><button></button><img id="'+image.attributes.id+'" src="'+image.attributes.url+'"></li>';
        });
        metadataString = imageIDArray.join(",");
        if (metadataString) {
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_select').text('Edit Selection');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

Für $imageArray oder $imageHTML kommt nichts heraus. $image ist etwas, es ist ein [object object].

BEARBEITEN 3: Wie unten im Kommentar erwähnt, besteht das Hauptproblem mit dem Code aus Bearbeiten 2 darin, dass Sie bei Verwendung von Galerie „Bibliothek“ anstelle von „Auswahl“ aufrufen müssen.

    // Uploading files
var file_frame;

jQuery('#fg_select').on('click', function(event){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        frame: "post",
        state: "gallery",
        library : { type : 'image'},
        button: {text: "Edit Image Order"},
        multiple: true
    });

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        var ids = jQuery('#fg_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            });
        }
    });

    // When an image is selected, run a callback.
    file_frame.on('update', function() {
        var imageIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('library');
        images.each(function(attachment) {
            imageIDArray.push(attachment.attributes.id);
            imageHTML += '<li><button></button><img id="'+attachment.attributes.id+'" src="'+attachment.attributes.url+'"></li>';
        });
        metadataString = imageIDArray.join(",");
        if (metadataString) {
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_select').text('Edit Selection');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

    // Finally, open the modal
    file_frame.open();

});

Die Hauptsache, mit der ich jetzt Schwierigkeiten habe, ist, dass ich es nicht dazu bringen kann, es mit einer Auswahl für die Galeriebearbeitung zu öffnen. Ich kann es dort öffnen, aber es sind keine Bilder ausgewählt. Ich probier das aus. Ich prüfe auch eine Wiedereröffnung, anstatt eine neue Ansicht zu erstellen und eine Vorauswahl zu senden. Wenn ich zum Auswahlfenster gehe, dann zum Bestellfenster, aber zum Schließen auf das X klicke, kann ich das Bestellfenster wieder öffnen. Es sollte also einen Weg geben.

BEARBEITEN 4

Gemäß dem Code aus der Antwort unten habe ich den Vorauswahlcode geändert in:

    file_frame.on('open', function() {
        var library = file_frame.state().get('library');
        var ids = jQuery('#fg_perm_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                library.add( attachment ? [ attachment ] : [] );
            });
        }
    });

Dadurch kann ich direkt den Galerie-Bearbeitungsstatus erneut öffnen und Bilder vorab auswählen. Wenn ich diesen Status jedoch direkt öffne, kann ich nicht auf Galerie abbrechen (zurück zum Bildauswahlstatus) klicken. Durch Klicken auf diese Schaltfläche/Link wird nur der Rahmen geschlossen. Ich habe versucht, sowohl die Bibliothek als auch die Auswahl vorab auszufüllen, aber das funktioniert auch nicht. Das Folgende stammt aus media-views.js und scheint diese Schaltfläche zu steuern. Anstatt den Zustand in einen bestimmten Zustand zu ändern, ändert es ihn in den vorherigen Zustand. Da wir uns direkt für die Galeriebearbeitung öffnen, gibt es keinen vergangenen Stand. Ich frage mich, ob es möglich ist, die Galerie zu öffnen und dann beim Öffnen zur Galerie-Bearbeitung zu wechseln. Tun Sie es sofort, damit der Benutzer es nicht sieht, aber damit es den vergangenen Zustand in das System bekommt.

    galleryMenu: function( view ) {
    var lastState = this.lastState(),
        previous = lastState && lastState.id,
        frame = this;

BEARBEITEN 5:

Endlich alles verstanden. Ich konnte das oben genannte überhaupt nicht zum Laufen bringen, ich bin mir nicht sicher warum. Es gibt also möglicherweise einen besseren Weg, dies zu tun, indem dieser Code verwendet wird. Wenn ja, würde ich es gerne wissen.

    file_frame.on('open', function() {
        var selection = file_frame.state().get('selection');
        var library = file_frame.state('gallery-edit').get('library');
        var ids = jQuery('#fg_perm_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            });
            file_frame.setState('gallery-edit');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                library.add( attachment ? [ attachment ] : [] );
            });
        }
    });

LETZTE BEARBEITUNG

Mein Code funktioniert jetzt vollständig und ich schätze die Hilfe! Wenn Sie es in Aktion sehen möchten, schauen Sie sich das an http://wordpress.org/plugins/featured-galleries/

Question 2

Ich bin relativ neu bei WP. Tatsächlich baue ich mein erstes WP-Thema und stecke bei der gleichen Frage fest wie Sie. Dank Ihres Codes kann ich auf die Galerieseite zugreifen. Und zum Glück habe ich die Bilder gespeichert. Hier ist mein Code:

// when click Insert Gallery, run callback
wp_media_frame.on('update', function(){
    var library = wp_media_frame.state().get('library');
    var images  = [];
    var image_ids = [];
    thumb_wraper.html('');

    library.map( function( image ) {
        image = image.toJSON();
        images.push(image.url);
        image_ids.push(image.id);
        thumb_wraper.append('<img src="' + image.url + '" alt="" />');
    });
});

Was ich gefunden habe, ist, dass Sie “Bibliothek” anstelle von “Auswahl” erhalten sollten.

Bearbeiten: Ich habe herausgefunden, wie ich zur Galerie-Bearbeitung zurückkehren kann. Hier ist mein vollständiger Code:

    $( '#btn_upload' ).on( 'click', function( event ) {
    event.preventDefault();

    var images = $( '#image_ids' ).val();
    var gallery_state = images ? 'gallery-edit' : 'gallery-library';

    // create new media frame
    // You have to create new frame every time to control the Library state as well as selected images
    var wp_media_frame = wp.media.frames.wp_media_frame = wp.media( {
        title: 'My Gallery', // it has no effect but I really want to change the title
        frame: "post",
        toolbar: 'main-gallery',
        state: gallery_state,
        library: {
            type: 'image'
        },
        multiple: true
    } );

    // when open media frame, add the selected image to Gallery
    wp_media_frame.on( 'open', function() {
        var images = $( '#image_ids' ).val();
        if ( !images )
            return;

        var image_ids = images.split( ',' );
        var library = wp_media_frame.state().get( 'library' );
        image_ids.forEach( function( id ) {
            attachment = wp.media.attachment( id );
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        } );
    } );

    // when click Insert Gallery, run callback
    wp_media_frame.on( 'update', function() {

        var thumb_wrapper = $( '#thumb-wrapper' );
        thumb_wraper.html( '' );
        var image_urls = [];
        var image_ids = [];

        var library = wp_media_frame.state().get( 'library' );

        library.map( function( image ) {
            image = image.toJSON();
            image_urls.push( image.url );
            image_ids.push( image.id );
            thumb_wrapper.append( '<img src="' + image.url + '" alt="" />' );
        } );
    } );
} );

Ich dachte mir, dass, wenn Sie den vorhandenen Rahmen erneut öffnen, er immer den ursprünglichen Zustand behält, in Ihrem Fall ist es “Galerie”. Sie müssen jedes Mal einen neuen Rahmen erstellen und prüfen, ob es Bilder zum Öffnen von „Galerie-Bearbeiten“ gibt. Außerdem bevorzuge ich „Galerie-Bibliothek“ als „Galerie“, weil ich möchte, dass sich der Benutzer auf meine Galerie konzentriert.