WordPress wp.media Customization

I’d like the user to click a button that opens the media window with only the posts uploaded to a specific page visible.

Then I want their selection to populate an input field.

Read More

Right now I’m struggling to find the middle ground between the frame “post” type and “select” type.

If I set wp.media frame to “post” I can see the images uploaded to the post, but I can’t insert into input field, and if I set to “select” I can’t limit option to “uploaded to post”.

var uploader;

$j(document).on('click','input[name="uploader_submit"]',function(){

    var button      = $j(this);
    var parent      = button.parents('.uploader');
    var input       = $j('input:text:first',parent);

    /* Extend the wp.media object */

    uploader = wp.media.frames.file_frame = wp.media({
        title: "Choose Media",
        button: { text: "Choose Media" },
        multiple: false,
        library: { type: "image" },
        frame: "post"
    });

    /* When a file is selected, grab the URL and set it as the text field's value */

    uploader.on('select',function(){            

        attachment = uploader.state().get('selection').first().toJSON();
        input.val(attachment.url);

    });

    /* Open the uploader dialog */

    uploader.open();

    return false;

});

Related posts

Leave a Reply

1 comment

  1. Use it like this

    /* Extend the wp.media object */
    
    uploader = wp.media.frames.file_frame = wp.media({
        title: "Choose Media",
        button: { text: "Choose Media" },
        multiple: false,
        library: { type: "image" },
        frame: "post",
        state: "insert"
    
    });
    
    /* When a file is selected, grab the URL and set it as the text field's value */
    
    uploader.on('insert',function(){