Bagaimana Saya Dapat Menambahkan Tab "Sisipkan Dari URL" ke Pengunggah Media 3,5 Khusus?

Saya telah memasukkan pengunggah media WP 3.5 ke dalam widget dengan menjalankan JavaScript ini saat tombol diklik:

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;

Itu memberi saya modal yang memiliki tab "Unggah File" dan "Pustaka Media", tetapi saya juga menginginkannya memiliki tab "Sisipkan Dari URL" yang Anda dapatkan saat mengklik tombol "Tambahkan Media" saat mengedit posting. /halaman.

Saya telah menghabiskan beberapa jam menggali di web, membaca kode sumber dan dan menonton presentasi Daryl Koopersmith di backend pengunggah , tetapi belum dapat mengetahuinya.

Bisakah seseorang mengarahkan saya ke arah yang benar? Apakah ada parameter yang bisa saya sampaikan ke wp.media () untuk memasukkannya, atau haruskah saya menggunakan salah satu tampilan / model bawaan yang menyertakannya?

Saya telah menggali kode sumber untuk alasan yang sama; Saya ingin menambahkan "Pengaturan Tampilan Lampiran" ke bingkai "pilih" default. Sejauh yang saya tahu, ini tidak dapat dilakukan dengan mengirimkan parameter ke wp.media (), seperti yang kita semua inginkan. wp.media saat ini memiliki dua bingkai ("posting" dan "pilih"), dan pandangan yang menyertainya adalah preset.

Pendekatan yang saya cari sekarang adalah memperluas media.view.mediaFrame untuk membuat bingkai baru (berdasarkan bingkai "pilih") yang mencakup bagian-bagian tampilan yang saya butuhkan. Jika ini berfungsi, saya akan memposting kode.

EDIT:

Ian, saya mendapatkan fitur yang saya inginkan untuk bekerja dan mengambil waktu untuk mencari tahu milik Anda. wp.media () tidak cukup modular seperti yang seharusnya. Ini hanya menerima nilai 'select' dan 'post' untuk frame, dengan 'select' sebagai default, jadi Anda tidak dapat membuat objek frame baru. Sebagai gantinya, Anda perlu memperluas salah satu dari dua objek bingkai (semua ini ada di /wp-includes/js/media-views.js), yang juga agak kikuk. Menambahkan bagian dari UI adalah proses beberapa langkah. Anda bisa mulai dengan Pilih dan tambahkan, tetapi untuk Anda, saya memilih untuk memulai dengan kode di bingkai Posting dan mengambil barang-barang galeri. Ini kode saya, berfungsi tetapi tidak diuji berat. Mungkin ada ruang untuk merampingkan juga.

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

    });

Ini menggabungkan kode dari wp.media.view.MediaFrame.Post dengan yang dari media.view.MediaFrame.Select, sesuaikan dengan fakta bahwa ini dijalankan di luar lingkup asli. Nilai untuk teks adalah berbagai tombol, dan Anda dapat referensi objek pelokalan Anda sendiri jika Anda inginkan. Nilai 'filterable' di konstruktor Perpustakaan (di createStates ()) menentukan jenis media mana yang akan didukung.

Setelah Anda memperluas objek Pilih dengan pendekatan ini, cukup instantiate dengan cara yang sama Anda saat ini dan tambahkan handler kustom Anda ketika gambar dipilih. Sisipan dari Url mungkin memunculkan peristiwa yang berbeda dari saat mengambil dari media yang diunggah. Mungkin akan lebih baik untuk instantiate frame Anda terlebih dahulu, sebenarnya, dan kemudian memperpanjangnya, sehingga frame media lain pada halaman tersebut tidak akan terpengaruh, tetapi saya belum mencoba ini.

Semoga itu bisa membantu-

Dari memeriksa kode sumber tampaknya modal media umum tidak mendukung "Sisipkan dari URL". Satu-satunya cara saya mendapatkan tab itu adalah dengan menentukan jenis bingkai "posting":

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

Kelemahannya adalah judul modal yang ditentukan diabaikan.

Intinya adalah bahwa tab mengembalikan URL eksternal untuk dimasukkan secara langsung ke dalam pos, sementara widget seharusnya mengembalikan ID media. Pada dasarnya gambar eksternal perlu ditransfer ke server.

Lihat bagaimana / apakah plugin Grab & Save melakukan apa yang Anda inginkan. ( via )