0

Here is the thing. I am using the WP media uploader on the frontend. What I need is to have it behave differently depending on a certain action.

I am attaching the media in a specific custom post type single page.

This is a small excerpt from my code. I'm using this to trigger the media library.

var uploader = wp.media({
        title: 'Upload Image',
        multiple: false
    }).open()
    .on('select', function(e){
    // Some code here
    });

Then I am filtering the library to show only certain attachments in the library, by using this filter here and by using the $_REQUEST to get the current post id:

function show_current_user_attachments( $query = array() ) {

   //Modify the query here to show current user attachments only
   return $query;
}
add_filter( 'ajax_query_attachments_args', 'show_current_user_attachments', 10, 1 );

So far so good but I need another separate piece of logic on the current post. I need to trigger another wp.media that is entirely different from this one. It needs to not have the upload image functionality and it needs to show different attachments in the library.

Simply put, my question is how can I extend the wp.media and pass different arguments that I can process in the 'ajax_query_attachments_args' filter so I have 2 entirely different media popups with different functionality?

Thanks in advance!

0

You will have to create two different media modals that are fired depending on your click event. Here is some code from a recent project where I added these buttons to the tinyMCE visual editor:

jQuery(document).ready(function($){
$(document).on('click', '.mce-my_upload_button', upload_image_tinymce);
$(document).on('click', '.mce-my_upload_pdf_button', upload_pdf_tinymce);

function upload_image_tinymce(e) {
    e.preventDefault();
    var $input_field = $('.mce-my_input_image');
    var custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add Image',
        button: {
            text: 'Add Image'
        },
         library: {
            type: 'image'
        },
        multiple: false
    });
    custom_uploader.on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $input_field.val(attachment.sizes.medium.url);
    });
    custom_uploader.open();
}
function upload_pdf_tinymce(e) {
    e.preventDefault();
    var $input_field = $('.mce-my_input_pdf');
    var custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add PDF',
        button: {
            text: 'Add PDF'
        },
        library: {
            type: 'application/pdf'
        },
        multiple: false
    });
    custom_uploader.on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $input_field.val(attachment.url);
    });
    custom_uploader.open();
}});

Hope this helps!

  • This is a great start. Now can you think of a way, where I can differentiate which one of the media frames is in use so I can filter the image library depending on that? – 0v3rth3d4wn Mar 24 '17 at 20:53
  • Check out the "library" parameter of the wp.media. That restricts the modal by type. What else would you need to restrict by? – Samyer Mar 26 '17 at 18:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.