Pre-Select Images when opening WordPress 3.5 media

问题:

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 !

回答1:

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.

回答2:

not a real answer, but somethings that I have noticed

using your code the frame.open( console.log('open') ) does trigger the console.log.
The other frame.on('open', function() { console.log('on->open')}) does not.

When looking at the post edit page. (Where a featured image is already set). If you open the featured img window a few things happen that are interesting.

1. WP does 3 ajax calls, the 1st and 3rst contain the featured img id. the 2nd is the same as with your code.

2. when the popup is loaded the featured image is visible / loaded before the rest of the images. When those show up the featured image is put in the right order.

3. When looking in firebug at the dom tab I discovered that the var wp.media.model.settings.post.featuredImageId holds (wait for it) the featured image value.

Hopes this helps you in some way.

回答3:

I think those guy manage to do it : https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213 But this doesn't work for me. I ve got the jquery in the footer of my post/edit, post/new but that just don't work for me :(