I’m trying to use the new wp.media uploader frame for an app I’m building. I’ve read up a lot on other questions, blog posts, etc etc.
The code I pasted below is working already quite fine and even does some extra stuff that I left in for reference in case it’s useful to anyone.
But there is one modification I’d like to bring to it: when the frame is opened, I want it to filter the “media library” display to only show attachment defined by a list of IDs that I provide.
Here is my current code:
// Uploading files
var file_frame;
$('.upload_attachments_button').on('click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: { text: jQuery( this ).data( 'uploader_button_text' ) },
library : { type : 'image' },
multiple: true // Set to true to allow multiple files to be selected
});
// When frame is open, select existing image attachments from custom field
file_frame.on( 'open', function() {
var selection = file_frame.state().get('selection');
var attachment_ids = jQuery('#attachment_ids').val().split(',');
// This is my attempt at showing only attachment with ID 275 --> but doesn't work!
file_frame.state().set( 'library', media.query({ id: 275 }) );
attachment_ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add( attachment ? [ attachment ] : [] );
});
});
// When images are selected, place IDs in hidden custom field and show thumbnails.
file_frame.on( 'select', function() {
var selection = file_frame.state().get('selection');
// Place IDs in custom field
var attachment_ids = selection.map( function( attachment ) {
attachment = attachment.toJSON();
return attachment.id;
}).join();
if( attachment_ids.charAt(0) === ',' ) { attachment_ids = attachment_ids.substring(1); }
$('#attachment_ids').val( attachment_ids );
// Show Thumbs
var attachment_thumbs = selection.map( function( attachment ) {
attachment = attachment.toJSON();
if( attachment.id != '' ) { return '<img src="' + attachment.sizes.thumbnail.url + '" id="id-' + attachment.id + '" />'; }
}).join(' ');
$('#images-feedback').show();
$('#thumbs').html(attachment_thumbs);
});
// Finally, open the modal
file_frame.open();
});
// Place selected thumbnail ID into custom field to save as featured image
$(document).on('click', '#thumbs img', function() {
$('#thumbs img').removeClass('chosen');
var thumb_ID = $(this).attr('id').substring(3);
$('#wpuf_featured_img').val(thumb_ID);
$(this).addClass('chosen');
});
I’m attempting to filter the media library display as seen here, but it gives no results:
file_frame.state().set( 'library', media.query({ id: 275 }) );
Does anyone know how to write the syntax?
1
You can always filter on the client side:
var query = wp.media.query();
query.filterWithIds = function(ids) {
return _(this.models.filter(function(c) { return _.contains(ids, c.id); }));
};
var res = query.filterWithIds([6,87]); // change these to your IDs
res.each(function(v){
console.log( v.toJSON() );
});
Disclaimer: found the beautiful filterWithIds
function in this SO question.