print_media_templates not applied in media manager plugin

Question

I'm trying to build a media library where users can choose pictures that are being retrieved from custom folders, which they can specify the basefolder of. I am getting the correct images back, but the template specified isn't applied to the thumbnails. It does find the caption (see sidebar when img is selected)

Instead of applying the wanted template, it says

<div class="filename"><div></div></div>

I actually don't even need a custom template, I'd be happy to have the image show up as in the standard library, but I can't seem to get the correct result.

In media-folder-management.js file I have this

var MfmView = Backbone.View.extend({
    tagName: "li",
    className: "mfmimage attachment",
    template: wp.media.template('mfmimage'),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

And in media-folder-management.php there is

public function print_media_templates() {
    if(!$_POST['id']){
        $this->printInit();
    }

    ?>

    <script type="text/html" id="tmpl-mfmimage">
        <p class="test"></p>

        <img id="{{ data.id }}" class="<# if ( typeof(data.folder) !== 'undefined' ) { #>folder<# } else { #>image<# } #>" src="{{ data.thumbnail }}" alt="{{ data.caption }}" title="{{ data.caption }}" data-full="{{ data.full }}" data-link="{{ data.link }}" />
        <# if ( typeof(data.folder) !== 'undefined' ) { #>
        <p>{{ data.caption }}</p>
        <# } #>
        <a class="check" id="check-link-{{ data.id }}" href="#" title="Deselect"><div id="check-{{ data.id }}" class="media-modal-icon"></div></a>

    </script>

    <?php

}

Goal is to keep WP functionality (featured image, create gallery, insert into page/post), but with more structured folderstructure (as customer allready has complete image-library structure).

Next steps would be:

• when file is dragged into the window, must be uploaded to folder which is open
• create/delete folders (with privileges according to user roles)
• drag img to other folder (optional)

I hope someone can help me solve this, I'm not very familiar with Backbone.js yet.

Thank you in advance!

Answer 1

Ok I've figured some things out by now: I was not returning the rendered image into anything

In the javascript I have a render function

media.view.AttachmentsBrowser = media.view.AttachmentsBrowser.extend({
        render: function(){
            var that = this;
            if(this.collection){
                if(this.collection.models.length > 0){
                    this.clearImages();
                    _.each(this.collection.models, function (item){
                        //old way: that.renderImage(item);
                        //now:
                        this.$el.find('#lastli').before(that.renderImage(item));
                    }, this);
                }
            }
        }
});

Obviously my images weren't showing...

But since I don't really need a template, I removed this code, so the standard tmpl is taken.

My quest continues though, for now I'm having trouble with filling the data object used in the media template, but I'll post another question for this, since it's another problem. In case interested, can you find the question here: attachment media-template data model (data.size.url)