Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
Please post your solution if you have one, I'd be really curious to see it. –  dalbaeb Mar 29 '13 at 16:29

1 Answer 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.

share|improve this answer
    
Thanks dalbaeb, I'll give it a try. –  Adal Apr 2 '13 at 23:59
    
dalbaeb, the code looks amazing. I tried pasting it into the section that runs on "open" of the frame but there is no effect. Should I rewrite the way I am creating the frame altogether by creating a new collection as seen in the example you quoted? –  Adal Apr 6 '13 at 0:06
    
It was just an example of how to fetch what you need, I didn't intend it to fit right into your code. It all depends on what file_frame.state().set() function accepts. You'd ideally paste my code before that line and try to feed what you get out of query.filterWithIds() into your set() call. –  dalbaeb Apr 6 '13 at 1:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.