চিত্র নির্বাচনের সাথে ওয়ার্ডপ্রেস wp_media মডেল প্রাক পপুলেট করুন

Question

আমি অ্যাডভান্সড কাস্টম ফিল্ডস প্লাগইনটির বিকাশকারী এবং আমি আশা করছি যে আমি যে সমস্যার মুখোমুখি হচ্ছি তাতে আপনি আমাকে সহায়তা করতে পারেন।

আমার একটি বোতাম আছে যেখানে আপনি একটি চিত্র সম্পাদনা করতে পারেন। এই বোতামটি ডাব্লুপি_মিডিয়া () ফাংশনটির মাধ্যমে একটি ডাব্লুপি ৩.৫ মিডিয়া মডেল চালু করবে।

সমস্যাটি হ'ল আমি কোনও চিত্র প্রাক-নির্বাচন করতে চাই যাতে তার বিশদটি সাইডবার প্যানেলে লোড হয়।

বর্তমানে আমি 'ওপেন' কলব্যাকের দিকে ঝুঁকছি এবং এমন কিছু কোড চালাচ্ছি যা এই নির্বাচনকে জনপ্রিয় করে তোলে, তবে এটি আড়ষ্ট এবং দক্ষ। এটি দেখতে এটির মতো:

// _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

লিপিটি এখানে:

আমি 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;
}

});

এবং এখানে পিএইচপি ফাংশন যা এজেএক্স অনুরোধটি পরিচালনা করে:

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

আমি আমার ওয়ার্ডপ্রেস ফ্রেমওয়ার্ক থেকে স্নিপেটটি কেবল অনুলিপি করেছি, আশা করি এটি কার্যকর হবে makes