Custom wp.media with arguments support

How to setup a [add media] button, with:

proper wordpress [media] UI
has size and alignments UI in popup right hand side
can custom popup title and button
size and alignments arguments can send back to be use

回答1:

Just try to cover most solutions:

use tb_show("", "media-upload.php?type=image&TB_iframe=true"); and window.send_to_editor

problem: has no standard wp.media UI

in js code:

jQuery("#my_button").click(function() {
    tb_show("", "media-upload.php?type=image&amp;TB_iframe=true");
    return false;
});
window.send_to_editor = function(html) {
    console.log(html);
    tb_remove();
}

use wp.media({frame: 'post'})

problem: cannot custom UI elements, such as: title, button

in js code:

function clearField(){
    #remove file nodes
    #...
}

var frame = wp.media({frame: 'post'});

frame.on('close',function() {
    var selection = frame.state().get('selection');
    if(!selection.length){
        clearField();
    }
});

frame.on( 'select',function() {
    var state = frame.state();
    var selection = state.get('selection');
    if ( ! selection ) return;

    clearField();

    selection.each(function(attachment) {
        console.log(attachment.attributes);
    });
});

frame.open();

use wp.media.editor with wp.media.editor.open( editor_id )
- problem: cannot custom UI elements, such as: title, button
- in js code: https://wordpress.stackexchange.com/questions/75808/using-wordpress-3-5-media-uploader-in-meta-box#75823

use wp.media with rewrite wp.media.controller.Library and retrieve attachment in select

problem: complicated ..., but once you understand it, it all make sense, and it is my finial solution

in js code:

/**
 * Please attach all the code below to a button click event
 **/

//create a new Library, base on defaults
//you can put your attributes in
var insertImage = wp.media.controller.Library.extend({
    defaults :  _.defaults({
            id:        'insert-image',
            title:      'Insert Image Url',
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true,
            multiple : true,
            type : 'image'//audio, video, application/pdf, ... etc
      }, wp.media.controller.Library.prototype.defaults )
});

//Setup media frame
var frame = wp.media({
    button : { text : 'Select' },
    state : 'insert-image',
    states : [
        new insertImage()
    ]
});

//on close, if there is no select files, remove all the files already selected in your main frame
frame.on('close',function() {
    var selection = frame.state('insert-image').get('selection');
    if(!selection.length){
        #remove file nodes
        #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
        #...
    }
});


frame.on( 'select',function() {
    var state = frame.state('insert-image');
    var selection = state.get('selection');
    var imageArray = [];

    if ( ! selection ) return;

    #remove file nodes
    #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
    #...

    //to get right side attachment UI info, such as: size and alignments
    //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
    selection.each(function(attachment) {
        var display = state.display( attachment ).toJSON();
        var obj_attachment = attachment.toJSON()
        var caption = obj_attachment.caption, options, html;

        // If captions are disabled, clear the caption.
        if ( ! wp.media.view.settings.captions )
            delete obj_attachment.caption;

        display = wp.media.string.props( display, obj_attachment );

        options = {
            id:        obj_attachment.id,
            post_content: obj_attachment.description,
            post_excerpt: caption
        };

        if ( display.linkUrl )
            options.url = display.linkUrl;

        if ( 'image' === obj_attachment.type ) {
            html = wp.media.string.image( display );
            _.each({
            align: 'align',
            size:  'image-size',
            alt:   'image_alt'
            }, function( option, prop ) {
            if ( display[ prop ] )
                options[ option ] = display[ prop ];
            });
        } else if ( 'video' === obj_attachment.type ) {
            html = wp.media.string.video( display, obj_attachment );
        } else if ( 'audio' === obj_attachment.type ) {
            html = wp.media.string.audio( display, obj_attachment );
        } else {
            html = wp.media.string.link( display );
            options.post_title = display.title;
        }

        //attach info to attachment.attributes object
        attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
        attachment.attributes['attachment'] = options;
        attachment.attributes['html'] = html;
        attachment.attributes['post_id'] = wp.media.view.settings.post.id;

        //do what ever you like to use it
        console.log(attachment.attributes);
        console.log(attachment.attributes['attachment']);
        console.log(attachment.attributes['html']);
    });
});

//reset selection in popup, when open the popup
frame.on('open',function() {
    var selection = frame.state('insert-image').get('selection');

    //remove all the selection first
    selection.each(function(image) {
        var attachment = wp.media.attachment( image.attributes.id );
        attachment.fetch();
        selection.remove( attachment ? [ attachment ] : [] );
    });

    //add back current selection, in here let us assume you attach all the [id] to <div id="my_file_group_field">...<input type="hidden" id="file_1" .../>...<input type="hidden" id="file_2" .../>
    jq("#my_file_group_field").find('input[type="hidden"]').each(function(){
         var input_id = jq(this);
        if( input_id.val() ){
            attachment = wp.media.attachment( input_id.val() );
            attachment.fetch();
            selection.add( attachment ? [ attachment ] : [] );
        }
    });
});

//now open the popup
frame.open();

回答2:

I would like to add to ZAC's option 4 because when I used his code, the image src="" was missing.

Here is the fix

                if ( 'image' === obj_attachment.type ) {
                html = wp.media.string.image( display );
                _.each({
                align: 'align',
                size:  'image-size',
                alt:   'image_alt'
                }, function( option, prop ) {
                if ( display[ prop ] )
                    options[ option ] = display[ prop ];
                });
                html = wp.media.string.image( display, obj_attachment );
            }

回答3:

This way you can call the new media uploader with custom title and button and right side bar.

var custom_uploader;
jQuery('#fileform').on('click','.select-files', function(e) {
    var button = jQuery(this);
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose File',
        library: {
            author: userSettings.uid // specific user-posted attachment
        },
        button: {
            text: 'Choose File'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        console.log(attachment.url);
        console.log(attachment.id); // use them the way you want
    });

    //Open the uploader dialog
    // Set post id
    wp.media.model.settings.post.id = jQuery('#post_ID').val();
    custom_uploader.open();
});