¿Cómo puedo agregar la pestaña "Insertar desde URL" a un cargador de medios personalizado 3.5?

15

He insertado un cargador de medios WP 3.5 en un widget ejecutando este JavaScript cuando se hace clic en un botón:

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;

Eso me da un modal que tiene las pestañas "Cargar archivos" y "Biblioteca de medios", pero también quiero que tenga la pestaña "Insertar desde URL" que se obtiene al hacer clic en el botón "Agregar medios" mientras editando una publicación / página.

Hepasadounpardehorasbuscandoenlaweb,leyendoelcódigofuenteyviendo la presentación de Daryl Koopersmith en el backend de la persona que subió , pero no he podido averiguarlo.

¿Puede alguien apuntarme en la dirección correcta? ¿Hay algún parámetro que pueda pasar a wp.media () para incluirlo o debo usar una de las vistas / modelos integrados que lo incluyen?

    
pregunta Ian Dunn 24.03.2013 - 01:20

3 respuestas

9

He estado buscando en el código fuente por una razón similar; Me gustaría agregar la "Configuración de visualización de archivos adjuntos" al marco predeterminado "Seleccionar". Por lo que puedo decir, esto no se puede hacer pasando parámetros a wp.media (), como nos gustaría a todos. wp.media tiene actualmente los dos cuadros ("publicar" y "seleccionar"), y las vistas que los acompañan están predefinidas.

El enfoque que estoy considerando ahora es extender media.view.mediaFrame para crear un nuevo marco (basado en el marco "select") que incluya las partes de la vista que necesito. Si consigo este trabajo, publicaré el código.

EDIT:

Ian, obtuve la función que quería trabajar y me tomé un tiempo para descubrir la tuya. wp.media () no es tan modular como podría ser. Solo acepta los valores 'seleccionar' y 'publicar' para el marco, con 'seleccionar' como predeterminado, por lo que no puede crear un nuevo objeto de marco. En su lugar, necesita extender uno de los dos objetos de marco (todo esto está en /wp-includes/js/media-views.js), que también es un poco torpe. Agregar parte de la interfaz de usuario es un proceso de varios pasos. Puedes comenzar con Seleccionar y agregar, pero para el tuyo elegí comenzar con el código en el marco de Publicación y quitar las cosas de la galería. Aquí está mi código, funcionando pero no muy probado. Probablemente algún espacio para la racionalización, también.

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

    });

Esto combina el código de wp.media.view.MediaFrame.Post con el de media.view.MediaFrame.Select, ajustando el hecho de que esto se ejecuta fuera del alcance original. Los valores para el texto son los distintos botones, y puede hacer referencia a su propio objeto de localización si lo desea. El valor 'filtrable' en el constructor de la Biblioteca (en createStates ()) determina qué tipos de medios serán compatibles.

Una vez que haya extendido el objeto Select con este enfoque, simplemente cree una instancia de la misma forma en que se encuentra actualmente y agregue su controlador personalizado para cuando se seleccione una imagen. El Insertar desde la URL podría disparar un evento diferente al seleccionar desde los medios cargados. Probablemente sería mejor crear una instancia de su marco primero, en realidad, y luego extenderlo, para que no se vea afectado ningún otro marco de medios en la página, pero no he intentado esto.

Espero que ayude-

    
respondido por el Brendan Gannon 02.04.2013 - 21:50
1

Al examinar el código fuente, parece que el modal de medios genérico no admite "Insertar desde URL". La única forma en que pude obtener esa pestaña fue especificar el tipo de marco "publicar":

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

La desventaja es que se ignora el título modal especificado.

    
respondido por el KalenGi 28.03.2013 - 05:39
0

El punto es que esa pestaña devuelve una URL externa para que se inserte directamente en la publicación, mientras que el widget debe devolver una ID de medios. Básicamente, la imagen externa se debe cargar en el servidor.

Vea cómo / si el complemento Grab & Guardar hace lo que quieres. ( a través de )

    
respondido por el bfred.it 27.03.2013 - 17:45

Lea otras preguntas en las etiquetas