print_media_templates not applied in media manager plugin

0 Views

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

Read More

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(){
        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!

Post Views: 0

Related posts

1 comment

  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)

Comments are closed.