Wordpress 3.5 Media Manager - adicione um botão

8

No meu plugin, gostaria de adicionar dois botões ao Media Manager (à esquerda de "Insert Into Post" na seção "media-toolbar-primary") e conectar uma ação do jQuery a ele.

  1. Primeiro - O botão "Selecionar tudo" permite selecionar todas as imagens disponíveis (somente imagens), dependendo do valor da opção selecionada (por exemplo, Todos os itens de mídia, Upload para este post, etc.). Então, se "Todos os itens de mídia" estiver selecionado - todas as imagens disponíveis serão selecionadas, se "Enviado para este post" for selecionado - apenas as imagens anexadas à postagem atual serão selecionadas.
  2. O segundo - "Custom Insert Into Post" - obterá dados de imagens para todas as imagens selecionadas (fonte de imagem em tamanho completo, texto alternativo, tamanho etc disponíveis) e permitindo agrupá-las em código html adicional - código de retorno editor de tinymce.

O código retornado para o segundo botão pode ser assim:

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

Tanto quanto eu entendo, a única maneira é usar substituir a visão de backbone apropriada, mas ao lado disso, isso é tudo que sei por enquanto.

Obrigado pela ajuda.

    
por Marcin Bobowski 09.01.2013 / 16:48

5 respostas

11

Esse bloco de código adicionará um botão ao lado da opção "Inserir no post". Quando clicado, ele enviará as imagens selecionadas para o editor do WP, cada uma dentro do HTML do seu modelo:

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

Adicionar um botão personalizado não é um problema. Mas selecionar "todas as imagens" pode ser um pouco complicado, pois o navegador de mídia WP 3.5 carrega os anexos pouco a pouco. Eu vou investigar isso, mas eu recomendo selecionar anexos manualmente.

    
por aesqe 23.02.2013 / 20:02
6

Escreva um pequeno plugin, use a seguinte fonte de exemplo para adicionar um item na lista da barra lateral esquerda no gerenciador de mídia dentro do pop-up da sobreposição.

Resultado da fonte abaixo:

add_action('admin_footer-post-new.php','wpse_78881_script');add_action('admin_footer-post.php','wpse_78881_script');functionwpse_78881_script(){?><scripttype="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
}
por bueltge 20.02.2013 / 13:37
3

Eu não tenho uma resposta completa para a sua pergunta, mas aqui está um bom começo. Para personalizar o novo Media Manager, você deve estudar o código Backbone do javascript em wp-includes/js/media-views.js . Por exemplo, aqui está um pequeno plug-in que adiciona um botão "Selecionar tudo" à barra de ferramentas "Inserir 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');
    }
});

Para o botão "Inserir personalizado no post", sugiro usar o shortcode da galeria. A interface do usuário já existe para selecionar as imagens desejadas e inserir o shortcode no lugar certo no tinymce. Tudo o que você precisa fazer é escrever o seu próprio formato de shortcode da galeria.

Dê uma olhada na função gallery_shortcode em wp-includes/media.php e use o filtro post_gallery .

    
por Fabien Quatravaux 22.02.2013 / 23:28
3

Thomas Griffin criou um exemplo de plug-in, New Media Image Uploader , sobre como trabalhar com o novo gerente de mídia.

  

Este plugin fornece um exemplo sólido para integrar o novo fluxo de trabalho do gerenciador de mídia em seus plugins / temas, mostrando como fazer upload / inserir um arquivo de imagem em um campo de texto.

    
por Elliott 13.01.2013 / 17:06
2

Acabei de encontrar um caso no WP 3.6, no qual a resposta (muito útil) de aesqe resulta em imagens sendo inseridas duas vezes devido ao state.get("selection")._byId do backbone, incluindo id e cid para cada imagem selecionada.

A alteração de state.get("selection")._byId para state.get("selection").models corrigiu isso para mim, preservando os atributos de cada objeto.

Espero que isso salve alguém com alguma frustração. Eu teria postado isso como um comentário em vez de uma resposta, mas, infelizmente, não tenho reputação.

    
por Dameian 29.08.2013 / 17:32