web-dev-qa-db-fra.com

Appel WP Gallery Uploader/Selector de Metabox

Lorsque je clique sur le bouton Ajouter un média sur un message/une page, j'ai la possibilité d'ajouter un média. Après avoir sélectionné le support, je clique sur Insérer dans publication et les images sont insérées. Cependant, il existe une autre option, qui se trouve dans la barre latérale gauche. Je peux cliquer sur Créer une galerie. Le processus de sélection d'image est identique, mais lorsque je clique sur Créer une nouvelle galerie, il passe à un nouveau cadre qui me permet de modifier l'ordre des images.

Cette deuxième fenêtre est ce que je suis après. J'appelle le cadre à partir d'une métabox et je l'ai obtenu avec succès pour me permettre de saisir une ou plusieurs images et d'enregistrer l'ID sous forme de chaîne, ainsi que d'insérer des vignettes dans une zone d'aperçu. Je ne trouve rien sur l'appel du cadre de la galerie.

Mon code actuel est le suivant:

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

});

Des idées?

uploadsgallerymedia-modal
1
Andy Mercer

Compris la réponse à la question.

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 ] : [] );
        });
    }
});

Pour plus de détails, consultez: https://stackoverflow.com/questions/21858112/calling-wordpress-gallery-uploader-selector-from-metabox .

Pour voir le code de travail en action, voir: http://wordpress.org/plugins/featured-galleries/

1
Andy Mercer