Prefetching images when opening WordPress 3.5 Media Manager

Question

I played with the new media manager in WordPress and had some fun, but got to the point where I hit my head against the wall.

I have a custom meta box in which I would like to store some images (well, this is hidden input, and I currently store their identifiers, but can equally be image objects), and then makes an AJAX call to show some thumbnails that I subsequently made draggable so that users could reorder (not necessarily matching just some background).

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

What I'm trying to understand is how to open a media manager with the current images that have passed through them so that they are preselected.

So 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 should be either a parameter that needs to be passed to the frame (maybe a JSON object for images, or I need to create an event for

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

But I tried both ways round and I won’t go anywhere.

It would seem that since changing the "Featured Image" will lead you to the library with the currently selected one - I just could not understand the basic code enough and hope there is someone else!

Answer 1

After exploring the kernel a bit, the answer here is pretty simple.

Listen to an open event, capture state, create attachment objects with your identifier and add them to the selection.

 frame.on('open',function() { var selection = frame.state().get('selection'); ids = jQuery('#my_field_id').val().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 ones, and assumes that using the code above you saved the values ​​in a single text / hidden field with a comma separation.

Answer 2

not a real answer, but something that I noticed

using your code, frame.open( console.log('open') ) starts console.log.
Another frame.on('open', function() { console.log('on->open')}) does not.

When viewing the post edit page. (If the image is already installed). If you open a window with an img image, you will need a few things.

• WP makes 3 ajax calls, 1st and 3rd contain the recognized img id. the second is the same as with your code.

• when the popup is loaded, the image will be visible / loaded in front of the rest of the images. When these images are displayed, the image is displayed in the correct order.

• When searching in firebug on the dom tab, I found that var wp.media.model.settings.post.featuredImageId contains (wait) the value of the recognized image.

Hope this helps you in some way.

Answer 3

I think these guys succeed: https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213 But this does not work for me. I got jquery in the footer of my post / edit, post / new, but this just doesn't work for me :(