Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to extend the media modal, but I cant' find any documentation / tutorials about it. I'm not a master of backbone too ;-)

I want to add a select box for each taxonomy that is attached to the attachment post type. At the moment only one select box is shown.

So this is what I came up with. It works great except that it replaces the default toolbar.


Code

/**
 * Extended Filters dropdown with taxonomy term selection values
 */
jQuery.each(mediaTaxonomies,function(key,label){

    media.view.AttachmentFilters[key] = media.view.AttachmentFilters.extend({
        className: key,

        createFilters: function() {
            var filters = {};

            _.each( mediaTerms[key] || {}, function( term ) {

                var query = {};

                query[key] = {
                    taxonomy: key,
                    term_id: parseInt( term.id, 10 ),
                    term_slug: term.slug
                };

                filters[ term.slug ] = {
                    text: term.label,
                    props: query
                };
            });

            this.filters = filters;
        }

    });

    /**
     * Replace the media-toolbar with our own
     */
    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
        createToolbar: function() {

            media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

            this.toolbar = new media.view.Toolbar({
                controller: this.controller
            });

            this.views.add( this.toolbar );

            this.toolbar.set( 'terms', new media.view.AttachmentFilters[key]({
                controller: this.controller,
                model:      this.collection.props,
                priority:   -80
            }).render() );
        }
    });

});

Original

enter image description here


My result

enter image description here


What I want

enter image description here


Full code

https://github.com/Horttcore/Media-Taxonomies

share|improve this question

1 Answer 1

up vote 6 down vote accepted
+50

The wonderful world of Backbone.js and WP (of which I know barely anything).

I think the problem is you are just calling the same default media.view, instead I believe you need to initialize a new one.

For example:

/**
 * Replace the media-toolbar with our own
 */
    var myDrop = media.view.AttachmentsBrowser;

    media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
    createToolbar: function() {

        media.model.Query.defaultArgs.filterSource = 'filter-media-taxonomies';

        myDrop.prototype.createToolbar.apply(this,arguments);

        this.toolbar.set( key, new media.view.AttachmentFilters[key]({
            controller: this.controller,
            model:      this.collection.props,
            priority:   -80
        }).render() );
    }
});

Would give you something like below (I did not do any thorough error checking but it does work).


enter image description here


You should also consider doing this with media.view.AttachmentFilters and anything custom with regards to window.wp.media;.

share|improve this answer
    
Awesome thank you! I should read about backbone.js soon, as it seems it gets more integrated in every new WP version. –  Horttcore Sep 15 '13 at 15:51
1  
Thank you for making this a plugin so it was easy to answer:) In fact you have inspired my to make a github plugin for WPSE questions. –  Wyck Sep 15 '13 at 18:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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