Como posso adicionar a guia “Inserir do URL” a um Media Uploader personalizado 3.5?

15

Inseri um uploader de mídia do WP 3.5 em um widget executando este JavaScript quando um botão é clicado:

var frame = wp.media( {
    title       : 'Widget Uploader',
    multiple    : false,
    library     : { type : 'image' },
    button      : { text : 'Select Image' }
} );

frame.on( 'close', function() {
    var attachments = frame.state().get( 'selection' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;

Isso me dá um modal que tem as guias "Carregar arquivos" e "Biblioteca de mídia", mas também quero que a guia "Inserir a partir de URL" seja exibida ao clicar no botão "Adicionar mídia" enquanto editando um post / página.

PasseialgumashoraspesquisandonaWeb,lendoocódigo-fonteeassistindoa apresentação de Daryl Koopersmith sobre o backend do remetente , mas não conseguiram descobrir.

Alguém pode me apontar na direção certa? Existe um parâmetro que eu possa passar para o wp.media () para incluí-lo, ou devo usar uma das views / models embutidos que o incluem?

    
por Ian Dunn 24.03.2013 / 01:20

3 respostas

9

Eu tenho pesquisado o código-fonte por um motivo semelhante; Eu gostaria de adicionar o "Attachment Display Settings" ao quadro "select" padrão. Tanto quanto eu posso dizer, isso não pode ser feito passando parâmetros para wp.media (), como todos nós gostaríamos. O wp.media tem atualmente os dois quadros ("post" e "select"), e os pontos de vista que os acompanham são predefinidos.

A abordagem que estou vendo agora é estender media.view.mediaFrame para criar um novo quadro (baseado no quadro "select") que inclui as partes da visão que eu preciso. Se eu conseguir esse trabalho, postarei o código.

EDITAR:

Ian, eu tenho o recurso que eu queria trabalhar e levei algum tempo para descobrir o seu. O wp.media () não é tão modular quanto poderia ser. Aceita apenas os valores 'select' e 'post' para frame, com 'select' sendo o padrão, então você não pode criar um novo objeto de frame. Em vez disso, você precisa estender um dos dois objetos de quadro (tudo isso em /wp-includes/js/media-views.js), que também é meio desajeitado. Adicionar parte da interface do usuário é um processo de várias etapas. Você poderia começar com Select e add on, mas para o seu eu escolhi começar com o código no quadro Post e tirar o material da galeria. Aqui está o meu código, funcionando, mas não muito testado. Provavelmente algum espaço para simplificar também.

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    'insert'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         'insert',
                        title:      'Insert Media',
                        priority:   20,
                        toolbar:    'main-insert',
                        filterable: 'image',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? 'reset' : false,
                        editable:   true,

                        // If the user isn't allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( 'router:create:browse', this.createRouter, this );
                this.on( 'router:render:browse', this.browseRouter, this );
                this.on( 'content:create:browse', this.browseContent, this );
                this.on( 'content:render:upload', this.uploadContent, this );
                this.on( 'toolbar:create:select', this.createSelectToolbar, this );
                //

                this.on( 'menu:create:gallery', this.createMenu, this );
                this.on( 'toolbar:create:main-insert', this.createToolbar, this );
                this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
                this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
                this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            'default': 'mainMenu'
                        },

                        content: {
                            'embed':          'embedContent',
                            'edit-selection': 'editSelectionContent'
                        },

                        toolbar: {
                            'main-insert':      'mainInsertToolbar'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + ':render:' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    'library-separator': new wp.media.View({
                        className: 'separator',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get('selection'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( 'backToLibrary', {
                    text:     'Return to Library',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode('browse');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get('editable');

                view.set( 'selection', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get('selection'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode('edit-selection');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( 'insert', {
                    style:    'primary',
                    priority: 80,
                    text:     'Select Image',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get('selection');

                        controller.close();
                        state.trigger( 'insert', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  'Set Featured Image',
                    state: this.options.state || 'upload'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: 'Insert Image'
                });
            }

    });

Isso combina o código de wp.media.view.MediaFrame.Post com o de media.view.MediaFrame.Select, ajustando o fato de que isso é executado fora do escopo original. Os valores para o texto são os vários botões e você pode referenciar seu próprio objeto de localização, se desejar. O valor 'filtrável' no construtor Library (em createStates ()) determina quais tipos de mídia serão suportados.

Depois de ter estendido o objeto Select com essa abordagem, instancie-o da mesma maneira que você está atualmente e adicione seu manipulador personalizado para quando uma imagem for selecionada. O Insert from Url pode disparar um evento diferente do que ao selecionar a mídia carregada. Provavelmente seria melhor instanciar primeiro o seu quadro, na verdade, e depois estendê-lo, para que quaisquer outros quadros de mídia na página não fossem afetados, mas eu não tentei isso.

Espero que ajude -

    
por Brendan Gannon 02.04.2013 / 21:50
1

A partir do exame do código-fonte, parece que o modal de mídia genérico não suporta "Insert from URL". A única maneira de conseguir essa guia foi especificar o tipo de quadro "post":

var frame = wp.media( {
                            title       : 'Widget Uploader',
                            multiple    : false,
                            library     : { type : 'image' },
                            button      : { text : 'Select Image' },
                            frame      : 'post'
                        } );

A desvantagem é que o título do modal especificado é ignorado.

    
por KalenGi 28.03.2013 / 05:39
0

O ponto é que essa guia retorna uma URL externa para ser inserida diretamente na postagem, enquanto o widget deve retornar uma ID de mídia. Basicamente, a imagem externa precisa ser transferida para o servidor.

Veja como / se o plug-in Agarre & Salvar faz o que você deseja. ( via )

    
por bfred.it 27.03.2013 / 17:45