Media Manager di Wordpress 3.5: aggiungi un pulsante

Nel mio plugin, vorrei aggiungere due pulsanti a Media Manager (a sinistra di "Inserisci nel post" nella sezione "media-toolbar-primary"), e collegare un'azione jQuery ad esso.

1. Primo: il pulsante "Seleziona tutto" consente di selezionare tutte le immagini disponibili (solo immagini), in base al valore dell'opzione selezionata (ad es. Tutti gli elementi multimediali, caricati in questo post, ecc.). Pertanto, se si seleziona "Tutti gli elementi multimediali" - verranno selezionate tutte le immagini disponibili, se si seleziona "Caricati in questo post" - verranno selezionate solo le immagini allegate al post corrente.
2. Il secondo - "Inserimento personalizzato nel post" - otterrà i dati delle immagini per tutte le immagini selezionate (sorgente immagine a grandezza naturale, testo alternativo, dimensioni ecc. Disponibili) e consentendo di racchiuderle nel codice HTML adizionale - restituire il codice all'editor tinymce.

Il codice restituito per il secondo pulsante potrebbe apparire in questo modo:

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>

Per quanto ne capisco, l'unico modo è usare la sostituzione della vista Backbone appropriata, ma a parte questo, questo è tutto ciò che so per ora.

Grazie per l'aiuto.

Questo blocco di codice aggiungerà un pulsante proprio accanto a quello "Inserisci nel post". Quando si fa clic, invierà le immagini selezionate all'editor WP, ognuna racchiusa all'interno del modello HTML:

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template('<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});

L'aggiunta di un pulsante personalizzato non è un problema. Ma selezionare "tutte le immagini" potrebbe essere un po 'complicato perché il browser multimediale WP 3.5 carica gli allegati bit per bit. Lo esaminerò, ma raccomando di selezionare manualmente gli allegati.

Scrivi un piccolo plug-in, utilizza la seguente fonte di esempio per aggiungere un elemento nell'elenco della barra laterale sinistra nel media manager all'interno del popup di overlay.

Risultato della fonte qui sotto:

add_action( 'admin_footer-post-new.php', 'wpse_78881_script' );
add_action( 'admin_footer-post.php', 'wpse_78881_script' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on('load', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = 'New Item!';

            jQuery(document).on( 'click', '.insert-media', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( '.media-menu', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}

• Soluzione iniziale da questa risposta WPSE .

• Link all'esempio di bozza del plug-in per aggiungere un menu javascript nel popup WP3.5 Media Library

Non ho una risposta completa alla tua domanda, ma ecco un buon inizio. Per personalizzare il nuovo Media Manager, è necessario studiare il codice Backbone javascript in wp-includes/js/media-views.js. Ad esempio, ecco un piccolo plug-in che aggiunge un pulsante "Seleziona tutto" alla barra degli strumenti "Inserisci da URL":

custom.php:

add_action('admin_enqueue_scripts', 'custom_add_script');
function custom_add_script(){
    wp_enqueue_script('custom', plugins_url('custom.js', __FILE__), array('media-views'), false, true);
}

custom.js:

var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    'primary',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: 'Select All',
                style: 'primary',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log('select All');
    }
});

Per il pulsante "Inserimento personalizzato nel post", suggerisco invece di utilizzare lo shortcode della galleria. L'interfaccia utente esiste già per selezionare le immagini desiderate e inserire lo shortcode nel posto giusto in tinymce. Tutto quello che devi fare è scrivere il tuo formato shortcode galleria.

Dai un'occhiata alla gallery_shortcodefunzione wp-includes/media.phpe usa il post_galleryfiltro.

Thomas Griffin ha creato un esempio di plug-in, New Media Image Uploader , su come lavorare con il nuovo media manager.

Questo plug-in offre un solido esempio di integrazione del nuovo flusso di lavoro di Media Manager nei plug-in / temi mostrando come caricare / inserire un file di immagine in un campo di testo.

Ho appena riscontrato un caso in WP 3.6 in cui la risposta (molto utile) di aesqe comporta l'inserimento di immagini due volte a causa del backbone che state.get("selection")._byIdinclude entrambi ide cidper ogni immagine selezionata.

Cambiando state.get("selection")._byIdper state.get("selection").modelsrisolverlo per me preservando gli attributi di ogni oggetto.

Spero che questo salverà qualcuno un po 'di frustrazione. Avrei pubblicato questo come commento anziché come risposta ma, ahimè, non ho reputazione.