Skip to content

Instantly share code, notes, and snippets.

@bitfade
Created March 2, 2015 14:11
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save bitfade/ee91d7e8aff16364b9ff to your computer and use it in GitHub Desktop.
Save bitfade/ee91d7e8aff16364b9ff to your computer and use it in GitHub Desktop.
Custom WordPress Media Uploader
(function ($) {
"use strict";
/*global wp,jQuery */
var CustomGalleryEdit,CustomFrame;
function customClasses() {
var media = wp.media;
var l10n = media.view.l10n;
CustomGalleryEdit = wp.media.controller.GalleryEdit.extend({
gallerySettings: function( browser ) {
if ( ! this.get('displaySettings') ) {
return;
}
var library = this.get('library');
if ( ! library || ! browser ) {
return;
}
browser.toolbar.set( 'reverse', {
text: l10n.reverseOrder,
priority: 80,
click: function() {
library.reset( library.toArray().reverse() );
}
});
}
});
CustomFrame = wp.media.view.MediaFrame.Post.extend({
galleryMenu: function( view ) {
},
createStates: function() {
var options = this.options;
// custom frame has only 2 states: gallery edit/add
this.states.add([
new CustomGalleryEdit({
library: options.selection,
editing: true,
requires: { selection: false },
menu: 'gallery'
}),
new media.controller.GalleryAdd()
]);
},
galleryEditToolbar: function() {
try {
var updateGallery = l10n.updateGallery;
// change the button label
l10n.updateGallery = 'Save Gallery';
// call parent method
media.view.MediaFrame.Post.prototype.galleryEditToolbar.apply(this,arguments);
// change the button behaviour so that it would allow us to save an empty gallery
this.toolbar.get().options.items.insert.requires.library = false;
l10n.updateGallery = updateGallery;
} catch (x) {
}
}
});
}
function getWorkFlow(selection) {
var attributes = {
state: 'gallery-edit',
editing: true,
multiple: true
};
if (typeof selection != 'undefined' && selection) {
attributes.selection = selection;
}
return new CustomFrame(attributes);
}
function init() {
if (window.wp && window.wp.media) {
customClasses();
}
}
$(init);
// the following functions can be used to interact with the custom media uploader
// input field where the gallery images ids are store as comma separated list
var store = $('input');
// the media uploader
var workflow = false;
// selection object which list gallery images as collection
var selection;
// opens the dialog
function open() {
if (!selection) {
fetch();
}
if (workflow) {
workflow.off('update',update);
workflow.dispose();
}
workflow = getWorkFlow(selection);
workflow.on('update',update);
workflow.open();
}
// create selection collection
function fetch() {
var value = store.val();
if (!value) {
selection = [];
return;
}
var shortcode = new wp.shortcode({
tag: "gallery",
attrs: { ids: value },
type: "single"
});
var attachments = wp.media.gallery.attachments( shortcode );
selection = new wp.media.model.Selection( attachments.models, {
props: attachments.props.toJSON(),
multiple: true
});
selection.gallery = attachments.gallery;
selection.more().done( function() {
// Break ties with the query.
selection.props.set({ query: false });
selection.unmirror();
selection.props.unset("orderby");
});
}
// retrieve list of gallery images and stores them
function update() {
var library = workflow.states.get('gallery-edit').get('library');
var ids = library.pluck('id');
var value = (typeof ids === 'object') ? ids.join(',') : '';
store.val(value);
selection = false;
}
}(jQuery));
@baravit
Copy link

baravit commented Jan 14, 2017

Hi bitfade, Tnx so much for this post.
didn't manage to understand who exactly to link this js with the Add Images button..
trying to assign onclick="open()" but it's just pops a blank window..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment