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

share|improve this question
    
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 Sep 24 '13 at 5:16
add comment

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){
                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: media template attachment data model

share|improve this answer
add comment

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.