5

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!

  • So, after doing some more testing I found that this tab (Flickr Uploads) will inherit content from any tab selected before it ... Example: click on the Insert from URL tab then select Flickr Uploads it will display the content that was rendered on the other tab ... NOTE: will do this with all tabs. Any models I should look at? – Designer 17 Jan 22 '14 at 4:05
  • Did you get anywhere with this? Looking to do something similar – Andy Oct 17 '14 at 15:15
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.

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.