Comment ajouter l'onglet «Insérer de l'URL» à un programme de téléchargement de média 3.5 personnalisé?

15

J'ai inséré un programme de téléchargement de média WP 3.5 dans un widget en exécutant ce code JavaScript lorsque vous cliquez sur un bouton:

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;

Cela me donne un modal qui contient les onglets "Télécharger les fichiers" et "Bibliothèque de supports", mais je souhaite également que l’onglet "Insérer à partir de l’URL" soit affiché lorsque vous cliquez sur le bouton "Ajouter un support" pendant que éditer un article / une page.

J'aipasséquelquesheuresàexplorerleWeb,àlirelecodesourceetàregarderlaprésentationde sur le site de Daryl Koopersmith. backend du téléchargeur , mais n’ont pas été en mesure de le comprendre.

Quelqu'un peut-il me diriger dans la bonne direction? Existe-t-il un paramètre que je peux transmettre à wp.media () pour l'inclure ou dois-je utiliser l'un des vues / modèles intégrés qui l'inclut?

    
posée Ian Dunn 24.03.2013 - 01:20

3 réponses

9

J'ai fouillé dans le code source pour une raison similaire; J'aimerais ajouter les "Paramètres d'affichage des pièces jointes" au cadre "sélectionner" par défaut. Autant que je sache, cela ne peut pas être fait en transmettant les paramètres à wp.media (), comme nous le souhaiterions tous. wp.media a actuellement les deux cadres ("post" et "select"), et les vues qui les accompagnent sont prédéfinies.

L’approche que je vois actuellement consiste à étendre media.view.mediaFrame pour créer un nouveau cadre (basé sur le cadre "select") qui inclut les parties de la vue dont j'ai besoin. Si cela fonctionne, je posterai le code.

EDIT:

Ian, j'ai eu la fonction que je voulais utiliser et j'ai mis du temps à trouver la tienne. wp.media () n'est pas aussi modulaire qu'il pourrait l'être. Il accepte uniquement les valeurs "select" et "post" pour le cadre, avec "select" comme valeur par défaut, vous ne pouvez donc pas créer un nouvel objet frame. Au lieu de cela, vous devez étendre l’un des deux objets frame (tout cela se trouve dans /wp-includes/js/media-views.js), ce qui est également assez maladroit. L'ajout d'une partie de l'interface utilisateur est un processus en plusieurs étapes. Vous pouvez commencer par sélectionner et ajouter, mais pour le vôtre, j'ai choisi de commencer avec le code dans le cadre Post et d’emporter le contenu de la galerie. Voici mon code, fonctionnant mais pas lourdement testé. Probablement un peu de place pour la rationalisation, aussi.

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

    });

Ceci combine le code de wp.media.view.MediaFrame.Post avec celui de media.view.MediaFrame.Select, en tenant compte du fait qu'il est exécuté en dehors de la portée d'origine. Les valeurs pour le texte sont les différents boutons, et vous pouvez référencer votre propre objet de localisation si vous le souhaitez. La valeur 'filterable' dans le constructeur de la bibliothèque (dans createStates ()) détermine les types de support qui seront pris en charge.

Une fois que vous avez étendu l'objet Sélectionner avec cette approche, il suffit de l'instancier de la même manière que vous êtes et d'ajouter votre gestionnaire personnalisé pour le choix d'une image. L'insertion à partir de l'URL peut déclencher un événement différent de celui lors de la sélection d'un média téléchargé. En fait, il serait probablement préférable d’instancier d’abord votre image, puis de l’étendre, de sorte que les autres images de support de la page ne soient pas affectées, mais je n’ai pas essayé cela.

J'espère que cela vous aidera -

    
réponse donnée Brendan Gannon 02.04.2013 - 21:50
1

D'après l'examen du code source, il semble que le média générique modal ne supporte pas "Insert from URL". L’un des moyens pour obtenir cet onglet était de spécifier le type de cadre "post":

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

L'inconvénient est que le titre du modal spécifié est ignoré.

    
réponse donnée KalenGi 28.03.2013 - 05:39
0

Le fait est que cet onglet renvoie une URL externe à insérer directement dans le message, tandis que le widget est censé renvoyer un ID de média. Fondamentalement, l'image externe doit être transférée sur le serveur.

Voyez comment / si le plug-in Grab & Enregistrer fait ce que vous voulez. ( via )

    
réponse donnée bfred.it 27.03.2013 - 17:45

Lire d'autres questions sur les étiquettes