Предварительно заполнить WordPress wp_media modal с выбором изображения

Я разработчик плагина Advanced Custom Fields и надеюсь, что вы сможете помочь мне с проблемой, с которой я столкнулся.

У меня есть кнопка, где вы можете редактировать изображение. Эта кнопка запускает медиа-мода WP 3.5 через функцию wp_media ().

Проблема в том, что я хочу предварительно выбрать изображение, чтобы его детали были загружены на панели боковой панели.

В настоящее время я подключаюсь к «открытому» обратному вызову и запускаю некоторый код, который заполняет этот выбор, однако он неуклюж и эффективен. Вот как это выглядит:

// _media is an object I am using _media.frame = wp.media({ title : 'title', multiple : false, button : { text : 'button' } }); // open _media.frame.on('open',function() { // add class _media.frame.$el.closest('.media-modal').addClass('acf-media-modal acf-expanded'); // set selection var selection = _media.frame.state().get('selection'), attachment = wp.media.attachment( id ); attachment.fetch(); selection.add( attachment ); }); // Finally, open the modal _media.frame.open(); 

Это работает нормально, пока пользователь не открывает другое модальное окно, не выбирает вкладку загрузки, а затем использует кнопку редактирования, которую я создал. Теперь код завершился неудачно, потому что мой код зависит от модальности в режиме просмотра.

Я нашел код, который заменит кадр на режим просмотра, он выглядит так:

 _media.frame.content.mode('browse'); 

Это работает некоторое время, но затем следующий код выходит из строя. Как будто нужно некоторое время для рендеринга, прежде чем вложение можно добавить к выбору ….

Конечно, есть лучший способ.

Спасибо за вашу помощь. Эллиот

Вот сценарий:

Я использую функцию loadImages в следующем скрипте для загрузки существующих прикрепленных изображений через AJAX, а затем просто loadImages функцию с идентификаторами изображений, и она открывает предварительно заполненный модальный.

 var frame, selection = loadImages(images); $('#stag_images_upload').on('click', function(e) { e.preventDefault(); var options = { title: '<?php _e("Create Featured Gallery", "stag"); ?>', state: 'gallery-edit', frame: 'post', selection: selection }; frame = wp.media(options).open(); frame.menu.get('view').unset('cancel'); frame.menu.get('view').unset('separateCancel'); frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>'; frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar // when editing a gallery overrideGalleryInsert(); frame.on( 'toolbar:render:gallery-edit', function() { overrideGalleryInsert(); }); frame.on( 'content:render:browse', function( browser ) { if ( !browser ) return; // Hide Gallery Settings in sidebar browser.sidebar.on('ready', function(){ browser.sidebar.unset('gallery'); }); // Hide filter/search as they don't work browser.toolbar.on('ready', function(){ if(browser.toolbar.controller._state == 'gallery-library'){ browser.toolbar.$el.hide(); } }); }); // All images removed frame.state().get('library').on( 'remove', function() { var models = frame.state().get('library'); if(models.length == 0){ selection = false; $.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }); } }); function overrideGalleryInsert(){ frame.toolbar.get('view').set({ insert: { style: 'primary', text: '<?php _e("Save Featured Gallery", "stag"); ?>', click: function(){ var models = frame.state().get('library'), ids = ''; models.each( function( attachment ) { ids += attachment.id + ',' }); this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>'; $.ajax({ type: 'POST', url: ajaxurl, data: { ids: ids, action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }, success: function(){ selection = loadImages(ids); $('#_stag_image_ids').val( ids ); frame.close(); }, dataType: 'html' }).done( function( data ) { $('.stag-gallery-thumbs').html( data ); console.log(data); }); } } }); } function loadImages(images){ if (images){ var shortcode = new wp.shortcode({ tag: 'gallery', attrs: { ids: images }, type: 'single' }); var attachments = wp.media.gallery.attachments( shortcode ); var selection = new wp.media.model.Selection( attachments.models, { props: attachments.props.toJSON(), multiple: true }); selection.gallery = attachments.gallery; selection.more().done( function() { // Break ties with the query. selection.props.set({ query: false }); selection.unmirror(); selection.props.unset('orderby'); }); return selection; } return false; } }); с var frame, selection = loadImages(images); $('#stag_images_upload').on('click', function(e) { e.preventDefault(); var options = { title: '<?php _e("Create Featured Gallery", "stag"); ?>', state: 'gallery-edit', frame: 'post', selection: selection }; frame = wp.media(options).open(); frame.menu.get('view').unset('cancel'); frame.menu.get('view').unset('separateCancel'); frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>'; frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar // when editing a gallery overrideGalleryInsert(); frame.on( 'toolbar:render:gallery-edit', function() { overrideGalleryInsert(); }); frame.on( 'content:render:browse', function( browser ) { if ( !browser ) return; // Hide Gallery Settings in sidebar browser.sidebar.on('ready', function(){ browser.sidebar.unset('gallery'); }); // Hide filter/search as they don't work browser.toolbar.on('ready', function(){ if(browser.toolbar.controller._state == 'gallery-library'){ browser.toolbar.$el.hide(); } }); }); // All images removed frame.state().get('library').on( 'remove', function() { var models = frame.state().get('library'); if(models.length == 0){ selection = false; $.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }); } }); function overrideGalleryInsert(){ frame.toolbar.get('view').set({ insert: { style: 'primary', text: '<?php _e("Save Featured Gallery", "stag"); ?>', click: function(){ var models = frame.state().get('library'), ids = ''; models.each( function( attachment ) { ids += attachment.id + ',' }); this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>'; $.ajax({ type: 'POST', url: ajaxurl, data: { ids: ids, action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }, success: function(){ selection = loadImages(ids); $('#_stag_image_ids').val( ids ); frame.close(); }, dataType: 'html' }).done( function( data ) { $('.stag-gallery-thumbs').html( data ); console.log(data); }); } } }); } function loadImages(images){ if (images){ var shortcode = new wp.shortcode({ tag: 'gallery', attrs: { ids: images }, type: 'single' }); var attachments = wp.media.gallery.attachments( shortcode ); var selection = new wp.media.model.Selection( attachments.models, { props: attachments.props.toJSON(), multiple: true }); selection.gallery = attachments.gallery; selection.more().done( function() { // Break ties with the query. selection.props.set({ query: false }); selection.unmirror(); selection.props.unset('orderby'); }); return selection; } return false; } }); с var frame, selection = loadImages(images); $('#stag_images_upload').on('click', function(e) { e.preventDefault(); var options = { title: '<?php _e("Create Featured Gallery", "stag"); ?>', state: 'gallery-edit', frame: 'post', selection: selection }; frame = wp.media(options).open(); frame.menu.get('view').unset('cancel'); frame.menu.get('view').unset('separateCancel'); frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>'; frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar // when editing a gallery overrideGalleryInsert(); frame.on( 'toolbar:render:gallery-edit', function() { overrideGalleryInsert(); }); frame.on( 'content:render:browse', function( browser ) { if ( !browser ) return; // Hide Gallery Settings in sidebar browser.sidebar.on('ready', function(){ browser.sidebar.unset('gallery'); }); // Hide filter/search as they don't work browser.toolbar.on('ready', function(){ if(browser.toolbar.controller._state == 'gallery-library'){ browser.toolbar.$el.hide(); } }); }); // All images removed frame.state().get('library').on( 'remove', function() { var models = frame.state().get('library'); if(models.length == 0){ selection = false; $.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }); } }); function overrideGalleryInsert(){ frame.toolbar.get('view').set({ insert: { style: 'primary', text: '<?php _e("Save Featured Gallery", "stag"); ?>', click: function(){ var models = frame.state().get('library'), ids = ''; models.each( function( attachment ) { ids += attachment.id + ',' }); this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>'; $.ajax({ type: 'POST', url: ajaxurl, data: { ids: ids, action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }, success: function(){ selection = loadImages(ids); $('#_stag_image_ids').val( ids ); frame.close(); }, dataType: 'html' }).done( function( data ) { $('.stag-gallery-thumbs').html( data ); console.log(data); }); } } }); } function loadImages(images){ if (images){ var shortcode = new wp.shortcode({ tag: 'gallery', attrs: { ids: images }, type: 'single' }); var attachments = wp.media.gallery.attachments( shortcode ); var selection = new wp.media.model.Selection( attachments.models, { props: attachments.props.toJSON(), multiple: true }); selection.gallery = attachments.gallery; selection.more().done( function() { // Break ties with the query. selection.props.set({ query: false }); selection.unmirror(); selection.props.unset('orderby'); }); return selection; } return false; } }); . var frame, selection = loadImages(images); $('#stag_images_upload').on('click', function(e) { e.preventDefault(); var options = { title: '<?php _e("Create Featured Gallery", "stag"); ?>', state: 'gallery-edit', frame: 'post', selection: selection }; frame = wp.media(options).open(); frame.menu.get('view').unset('cancel'); frame.menu.get('view').unset('separateCancel'); frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>'; frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar // when editing a gallery overrideGalleryInsert(); frame.on( 'toolbar:render:gallery-edit', function() { overrideGalleryInsert(); }); frame.on( 'content:render:browse', function( browser ) { if ( !browser ) return; // Hide Gallery Settings in sidebar browser.sidebar.on('ready', function(){ browser.sidebar.unset('gallery'); }); // Hide filter/search as they don't work browser.toolbar.on('ready', function(){ if(browser.toolbar.controller._state == 'gallery-library'){ browser.toolbar.$el.hide(); } }); }); // All images removed frame.state().get('library').on( 'remove', function() { var models = frame.state().get('library'); if(models.length == 0){ selection = false; $.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }); } }); function overrideGalleryInsert(){ frame.toolbar.get('view').set({ insert: { style: 'primary', text: '<?php _e("Save Featured Gallery", "stag"); ?>', click: function(){ var models = frame.state().get('library'), ids = ''; models.each( function( attachment ) { ids += attachment.id + ',' }); this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>'; $.ajax({ type: 'POST', url: ajaxurl, data: { ids: ids, action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce }, success: function(){ selection = loadImages(ids); $('#_stag_image_ids').val( ids ); frame.close(); }, dataType: 'html' }).done( function( data ) { $('.stag-gallery-thumbs').html( data ); console.log(data); }); } } }); } function loadImages(images){ if (images){ var shortcode = new wp.shortcode({ tag: 'gallery', attrs: { ids: images }, type: 'single' }); var attachments = wp.media.gallery.attachments( shortcode ); var selection = new wp.media.model.Selection( attachments.models, { props: attachments.props.toJSON(), multiple: true }); selection.gallery = attachments.gallery; selection.more().done( function() { // Break ties with the query. selection.props.set({ query: false }); selection.unmirror(); selection.props.unset('orderby'); }); return selection; } return false; } }); 

И вот функция php, которая обрабатывает запрос AJAX:

 function stag_save_images(){ if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){ return; } if ( !isset($_POST['ids']) || !isset($_POST['nonce']) || !wp_verify_nonce( $_POST['nonce'], 'stag-ajax' ) ){ return; } if ( !current_user_can( 'edit_posts' ) ) return; $ids = strip_tags(rtrim($_POST['ids'], ',')); update_post_meta($_POST['post_id'], '_stag_image_ids', $ids); $thumbs = explode(',', $ids); $thumbs_output = ''; foreach( $thumbs as $thumb ) { $thumbs_output .= '<li>' . wp_get_attachment_image( $thumb, array(75,75) ) . '</li>'; } echo $thumbs_output; die(); } add_action( 'wp_ajax_stag_save_images', 'stag_save_images' ); function stag_metabox_scripts(){ global $post; if( isset($post) ) { wp_localize_script( 'jquery', 'stag_ajax', array( 'post_id' => $post->ID, 'nonce' => wp_create_nonce( 'stag-ajax' ) ) ); } } add_action( 'admin_enqueue_scripts', 'stag_metabox_scripts' ); 

Я просто скопировал фрагмент из моей рамки WordPress, надеюсь, что это имеет смысл.