28

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 !

Mark
  • 3,005
  • 1
  • 21
  • 30
  • I'm want to know exactly this. Also diving into this, I'll let you know if I have more luck then yoiu ;) – janw Dec 18 '12 at 18:15
  • 1
    how do you get the selections at `frame.on('close',.....` ? – janw Dec 18 '12 at 20:35
  • 2
    I have used images = frame.state().get('selection'); - but using set('selection') doesn't seem to work on the open event. – Mark Dec 19 '12 at 07:45
  • 1
    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 Dec 19 '12 at 08:36
  • 1
    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 Dec 19 '12 at 08:46
  • Thanks that works ;) I'm not really good at javascript, more a php guy – janw Dec 19 '12 at 08:54
  • You might be interested to look at the code I have in this plugin http://wordpress.org/plugins/media-categories-2/ which adds a couple form elements to the media modal. – eddiemoya May 21 '13 at 18:36

3 Answers3

43

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.

Remco Beugels
  • 1,153
  • 1
  • 12
  • 21
Mark
  • 3,005
  • 1
  • 21
  • 30
  • I wonder if theres a more backbone-solution for this type of problem. Also, I think there's a selection: option you can pass to `wp.media` – NoBugs Jan 09 '13 at 02:45
  • THANKS! Now, can you get the media viewer to scroll to the pre-selected image? If you have a lot of images, it might be a couple of screens down the list. – mrbinky3000 Feb 06 '14 at 16:00
  • That's really great, thanks for posting. A note, the `attachment.fetch();` line might not be necessary; I didn't need it anyway, it might be implicit in the call to `wp.media.attachment()`. Then again, I'm doing some unusual things with widgets at the moment, so YMMV. – aendra Feb 25 '14 at 10:28
  • Thanks! Worked like a charm. – Omar Tariq Jul 06 '15 at 23:08
  • 1
    Any way to find attachment ID by URL value? – Digerkam Oct 27 '16 at 16:31
  • I get an error: Uncaught ReferenceError: attachment is not defined The error occurs on this line: attachment = wp.media.attachment(id); – lukgoh Oct 06 '19 at 14:35
  • Complementing de answer with de original documentation: https://codex.wordpress.org/Javascript_Reference/wp.media – José María Lamela Real Oct 17 '19 at 09:54
1

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.

janw
  • 6,672
  • 6
  • 26
  • 45
0

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 :(

Community
  • 1
  • 1
milki
  • 1
  • 1
    This is a slightly different issue - it handles the default query (i.e. which images are shown), rather than which images are selected (i.e. with a tick on them). – Mark Dec 19 '12 at 16:03
  • But image selected are attache to the post and visible with this hack ? I need to re read your post ... : ) – milki Dec 19 '12 at 16:17