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

by

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