Wordpress 3.5 Media Manager: agregue un botón

En mi plugin, me gustaría agregar dos botones al Administrador de medios (a la izquierda de "Insertar en la publicación" en la sección "media-toolbar-primary") y conectarle una acción jQuery.

1. Primero: el botón "Seleccionar todo" debe permitir seleccionar todas las imágenes disponibles (solo imágenes), según el valor de la opción seleccionada (por ejemplo, Todos los elementos multimedia, Cargados en esta publicación, etc.). Por lo tanto, si se selecciona "Todos los elementos multimedia", se seleccionarán todas las imágenes disponibles, si se selecciona "Subido a esta publicación", solo se seleccionarán las imágenes adjuntas a la publicación actual.
2. La segunda, "Insertar en la publicación personalizada", obtendrá datos de imágenes para todas las imágenes seleccionadas (fuente de imagen de tamaño completo, texto alternativo, tamaño, etc. que están disponibles) y, al tiempo que permite envolverlas en código html adicional, código de retorno al editor tinymce.

El código devuelto para el segundo botón podría verse así:

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

Por lo que yo entiendo, la única forma es usar anular la vista Backbone apropiada, pero aparte de eso, eso es todo lo que sé por ahora.

Gracias por la ayuda.

Este bloque de código agregará un botón justo al lado del "Insertar en la publicación". Al hacer clic, enviará las imágenes seleccionadas al editor de WP, cada una envuelta dentro de su plantilla 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);
            }
        });
    }
});

Agregar un botón personalizado no es un problema. Pero seleccionar "todas las imágenes" podría ser un poco complicado porque el navegador de medios WP 3.5 carga los archivos adjuntos poco a poco. Lo investigaré, pero recomiendo seleccionar los archivos adjuntos manualmente.

Escriba un pequeño complemento, use la fuente de ejemplo siguiente para agregar un elemento en la lista de la barra lateral izquierda en el administrador de medios dentro de la ventana emergente de superposición.

Resultado de la fuente a continuación:

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
}

• Solución inicial de esta respuesta WPSE .

• Enlace al borrador del ejemplo de complemento para agregar un menú de JavaScript a la ventana emergente de la Biblioteca multimedia WP3.5

No tengo una respuesta completa a su pregunta, pero aquí hay un buen comienzo. Para personalizar el nuevo Administrador de medios, debe estudiar el código Backbone de JavaScript en wp-includes/js/media-views.js. Por ejemplo, aquí hay un pequeño complemento que agrega un botón "Seleccionar todo" a la barra de herramientas "Insertar desde 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');
    }
});

Para el botón "Insertar personalizado en la publicación", sugiero usar el shortcode de la galería en su lugar. La interfaz de usuario ya existe para seleccionar las imágenes deseadas e insertar el shortcode en el lugar correcto en tinymce. Todo lo que tiene que hacer es escribir su propio formato de shortcode de galería.

Eche un vistazo a la gallery_shortcodefunción wp-includes/media.phpy use el post_galleryfiltro.

Thomas Griffin creó un ejemplo de complemento, New Media Image Uploader , sobre cómo trabajar con el nuevo administrador de medios.

Este complemento proporciona un ejemplo sólido para integrar el nuevo flujo de trabajo del administrador de medios en sus complementos / temas al mostrarle cómo cargar / insertar un archivo de imagen en un campo de texto.

Acabo de encontrar un caso en WP 3.6 donde la respuesta de aesqe (muy útil) da como resultado que las imágenes se inserten dos veces debido a la columna vertebral, state.get("selection")._byIdincluidas ambas idy cidpara cada imagen seleccionada.

Cambiar state.get("selection")._byIda state.get("selection").modelsarreglado esto para mí mientras conserva los atributos de cada objeto.

Esperemos que esto le ahorre algo de frustración. Hubiera publicado esto como un comentario en lugar de una respuesta, pero, por desgracia, no tengo reputación.