Comment puis-je ajouter l'onglet "Insérer de l'URL" à un téléchargeur de média 3.5 personnalisé?
J'ai inséré un téléchargeur 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 comporte les onglets "Télécharger les fichiers" et "Bibliothèque de documents", mais je souhaite également que l’onglet "Insérer à partir de l’URL" soit affiché lorsque vous cliquez sur le bouton "Ajouter un média" lors de la modification d’un message. /page.
J'ai passé quelques heures à explorer le Web, à lire le code source et à regarder la présentation de Daryl Koopersmith sur le backend de l'éditeur , mais je n'ai pas été en mesure de le comprendre.
Quelqu'un peut 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?
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 suis en train de regarder 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.
MODIFIER:
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 n'accepte que les valeurs 'select' et 'post' pour le cadre, avec 'select' étant la 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 Select 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 de la 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'
});
}
});
Cela 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 façon 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 du 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 pourra aider-
D'après l'examen du code source, il semble que le média générique modal ne supporte pas "Insert from URL". La façon dont j'ai pu 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é.
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 plugin Grab & Save fait ce que vous voulez. ( via )