Pre-Select Images when opening WordPress 3.5 media manager

Question

I've been playing around with the new media manager in WordPress and had some fun with it, but have reached the point where I'm banging my head against a wall.

I have a custom meta box that I'd like to store some images in (well it's a hidden input and I'm currently storing their ID's, but could equally be the image objects), then making an AJAX call to show some thumbnails, which I have subsequently made draggable so users can reorder (not necessarily relevant just some background).

My problem is that when I open the media manager, no images are selected, so if a user wants to edit the pictures in their gallery they need to select them all again.

What I'm trying to figure out, is how do I open the media manager with the current images passed through so they are pre-selected.

So, broadly, my code looks like this

jQuery('#myButton').click(function(e) {
  e.preventDefault();
  frame = wp.media({
    title : 'My Gallery Title',
    multiple : true,
    library : { type : 'image'},
    button : { text : 'Insert' },
  });
  frame.on('close',function() {
    // get selections and save to hidden input plus other AJAX stuff etc.
  }
  frame.open();
});

My thought is that there must be either a parameter to pass into the frame (probably a JSON object of the images, or I need to create an event for

frame.on('open', function() {
  // Set selected images
}

But I have tried both ways round and am not getting anywhere.

It would appear possible, as changing the 'Featured Image' takes you to the library with the current one selected - I've just been unable to understand the core code sufficiently yet and hope someone else has !

I'm want to know exactly this. Also diving into this, I'll let you know if I have more luck then yoiu ;) — janw
I have used images = frame.state().get('selection'); - but using set('selection') doesn't seem to work on the open event. — Mark
If I use images = frame.state().get('selection'); in the close callback it gives me a huge object in which I cannot find a selected image. The rest of the code is identical to yours. — janw
OK, so the object holds the images - add something like images.each( function (image) ) { alert(image.id); }); and it will cycle through the id's of the images you have selected, there are other properties too if you examine them. — Mark

Mark Mark · Accepted Answer · 2012-12-20T00:11:27

After studying the core for a bit, the answer here is really quite straightforward.

Listen for the open event of the wp.media object, grab the state, create attachment objects with your id's and add them to the selection.

frame.on('open',function() {
  var selection = frame.state().get('selection');
  var ids_value = jQuery('#my_field_id').val();

  if(ids_value.length > 0) {
    var ids = ids_value.split(',');

    ids.forEach(function(id) {
      attachment = wp.media.attachment(id);
      attachment.fetch();
      selection.add(attachment ? [attachment] : []);
    });
  }
});

This works when selecting multiple images as well as single and assumes that using the code above you have stored the values in a single text/hidden field with comma separation.

Pre-Select Images when opening WordPress 3.5 media manager

3 Answers