छवि चयन के साथ वर्डप्रेस wp_media मोडल को प्री पॉप्युलेट करें

Question

मैं एडवांस्ड कस्टम फील्ड्स प्लगइन का डेवलपर हूं और उम्मीद कर रहा हूं कि आप एक समस्या का सामना करने में मेरी मदद कर सकते हैं।

मेरे पास एक बटन है जहां आप एक छवि संपादित कर सकते हैं। यह बटन wp_media () फ़ंक्शन के माध्यम से WP 3.5 मीडिया मोडल लॉन्च करेगा।

समस्या यह है कि मैं एक छवि को पूर्व-चयन करना चाहता हूं ताकि यह विवरण साइडबार पैनल में लोड हो जाए।

वर्तमान में मैं 'ओपन' कॉलबैक में हुकिंग कर रहा हूं और कुछ कोड चला रहा हूं जो इस चयन को पॉप्युलेट करता है, हालांकि, यह क्लंकी और कुशल है। यह है जो ऐसा लग रहा है:

// _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');

यह कुछ समय के लिए काम करता है, लेकिन फिर निम्न कोड विफल हो जाता है। जैसे चयन में जुड़ने से पहले इसे रेंडर करने के लिए कुछ समय चाहिए ...।

निश्चित रूप से एक बेहतर तरीका है।

आपकी सहायता के लिए धन्यवाद। इलियट

Comments

इस सवाल की जटिलता के कारण, शायद यह करता है, तो आप एक सरल रूप में यह बंडल प्लगइन है कि WPSE उपयोगकर्ताओं GitHub के माध्यम से अधिमानतः स्थापित कर सकते हैं सबसे अच्छा है, meta.wordpress.stackexchange.com/questions/2572/...

— Wyck

Answer 1

यहाँ स्क्रिप्ट है:

मैं loadImagesAJAX के माध्यम से मौजूदा संलग्न चित्रों को लोड करने के लिए स्क्रिप्ट का अनुसरण करने में फ़ंक्शन का उपयोग कर रहा हूं और फिर फ़ंक्शन को छवियों की आईडी के साथ पास करता हूं और यह एक पूर्व-आबादी वाले मोडल को खोलता है।

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' );

मैंने सिर्फ अपने वर्डप्रेस ढांचे से स्निपेट की नकल की है, आशा है कि यह समझ में आता है।