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)

images from 2013_accs folder

Instead of applying the wanted template, it says

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

enter image description here

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(){
        return this;

And in media-folder-management.php there is

public function print_media_templates() {


    <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>




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!

  • In case anyone was wondering about the if(!$_POST['id']){ $this->printInit(); } in the print_media_templates, I removed it now, so this can not keep the template from being properly retrieved...
    – Anneke
    Commented Sep 24, 2013 at 5:16

1 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.models.length > 0){
                    _.each(this.collection.models, function (item){
                        //old way: 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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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