Customizing the 3.5 “Add Media” popup (Backbone.js)

by

Here’s yet another question in regard to the new(ish) 3.5 “Add Media” popup and how to customize it!

What I’m trying to do

I’m attempting to do four main things: 1) Create a custom tab titled “Flickr Uploads”; 2) Customize the text that is displayed in the upload button; 3) Populate the select dropdown with external API sorting options (in other words unset the default options and set my own… only for the custom tab); 4) change the photos that are displayed to ones from an external API and still be able to add tags, descriptions, etc… in the right-side-bar.

What I’ve managed to do

With the use of the gist by @Fabien Quatravaux I have completed steps 1) and 2) in the list above … but, I’m having some trouble figuring this stuff out. This is what is being displayed:

Good start but not done!

Where I need help to finish

As you can see I still need to figure out how to customize the select dropdown options, display the meta-data inputs in the right-side-bar, as well as make the images select the right way and get the button to interact the same as on the “Insert Media” tab.

I have barely messed with jQuery let-alone Backbone … so, needless to say I am quite lost in what to do. I don’t know where to start.

Thank you for any help!

1
1

I had do adapt Backbone for a project of mine, so I might help to get you started.

If you want to adapt the rendering of your Backbone Templates, you need to rewrite them, because there are no built in filters for existing Templates. 

add_action('print_media_templates', 'print_my_media_templates');

function print_my_media_templates() {
    ?>
    <script type="text/html" id="my-custom-template">
        //TODO: Copy existing blade template and adapt to your needs
        //TODO: You can access all custom vars here and seed
    </script>
    <?php
}

The next thing to do: Prepare your requested template and seed it with your data. 

add_action('media_view_strings', 'prepare_data_for_js');

function prepare_data_for_js( $response ) {
    //TODO: Conditional seeding of $response['some_var']
}

Adapt your custom_media_menu.js to render the new template:

wp.media.view.Custom = wp.media.view.Custom.extend({
    template: function(view) {
        return wp.media.template('my-custom-template')(view);
    }
});

Then your API magic should start working soon.

Leave a Comment