attachment media-template data model (data.size.url)

Question

Problem fixed:
I was not sending all properties (and didn’t find a list of possible properties) that the media_template expects.

Finally I ended up alerting the data object by doing this (last 6 lines), where I first checked out ‘data’, and then each [object, object] that was returned (such as data.size)

<script type="text/html" id="tmpl-attachment">
        <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
            <# if ( data.uploading ) { #>
                <div class="media-progress-bar"><div></div></div>
            <# } else if ( 'image' === data.type ) { #>
                <div class="thumbnail">
                    <div class="centered">
                        <img src="https://wordpress.stackexchange.com/questions/115409/{{ data.size.url }}" draggable="false" />
                    </div>
                </div>
            <# } else { #>
                <img src="{{ data.icon }}" class="icon" draggable="false" />
                <div class="filename">
                    <div>{{ data.filename }}</div>
                </div>
            <# } #>    
            <# if ( data.buttons.close ) { #>
                <a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
            <# } #>    
            <# if ( data.buttons.check ) { #>
                <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
            <# } #>
        </div>
        <#
                var o = data.size
                var out="";
                for (var p in o) {
                  out += p + ': ' + o[p] + '\n';
                }
                alert(out);
    </script>

For anyone wanting to get the full property list, I’ll copypast my code that fills the object

$aFileImgSize = getimagesize($sFolderUrl);

if($aFileImgSize[0] >= $aFileImgSize[1]){
    $sOrientation = 'landscape';
}else{
    $sOrientation = 'portrait';
}

$aImage = array();
$aImage['id'] = $sFolderUrl;
$aImage['title'] = $sFile;
$aImage['filename'] = $sFile;
$aImage['url'] = $sFolderUrl;
$aImage['link'] = $sFolderUrl;
$aImage['alt'] = $sFile;
$aImage['author'] = '3';
$aImage['description'] = $sFile;
$aImage['caption'] = $sFile;
$aImage['name'] = $sFile;
$aImage['status'] = 'inherit';
$aImage['uploadedTo'] = '0';
$aImage['date'] = '';
$aImage['modified'] = '';
$aImage['menuOrder'] = '0';
$aImage['mime'] = 'image/'.$aFileImgSize[2];
$aImage['type'] = 'image';
$aImage['subtype'] = $aFileImgSize[2];
$aImage['icon'] = '';
$aImage['dateFormatted'] = '';
    $aNonces = array();
    $aNonces['update'] = '';
    $aNonces['delete'] = '';
$aImage['nonces'] = $aNonces;//object
$aImage['editLink'] = '';
    $aSizes = array();
        $aSizesThumbnail = array();
        $aSizesThumbnail['height'] = $aFileImgSize[1];
        $aSizesThumbnail['width'] = $aFileImgSize[0];
        $aSizesThumbnail['url'] = $sFolderUrl;
        $aSizesThumbnail['orientation'] = $sOrientation;
    $aSizes['thumbnail'] = $aSizesThumbnail;//object
        $aSizesMedium = array();
        $aSizesMedium['height'] = $aFileImgSize[1];
        $aSizesMedium['width'] = $aFileImgSize[0];
        $aSizesMedium['url'] = $sFolderUrl;
        $aSizesMedium['orientation'] = $sOrientation;
    $aSizes['medium'] = $aSizesMedium;//object
        $aSizesFull = array();
        $aSizesFull['height'] = $aFileImgSize[1];
        $aSizesFull['width'] = $aFileImgSize[0];
        $aSizesFull['url'] = $sFolderUrl;
        $aSizesFull['orientation'] = $sOrientation;
    $aSizes['full'] = $aSizesFull;//object
$aImage['sizes'] = $aSizes;//object
$aImage['height'] = $aFileImgSize[1];
$aImage['width'] = $aFileImgSize[0];
$aImage['orientation'] = $sOrientation;
    $aCompat = array();
    $aCompat['item'] = '';
    $aCompat['meta'] = '';
$aImage['compat'] = $aCompat;//object
$aImage['uploading'] = '';
    $aButtons = array();
    $aButtons['check'] = true;
$aImage['buttons'] = $aButtons;//object
$aImage['describe'] = '';
    $aSize = array();
    $aSize['url'] = $sFolderUrl;
    $aSize['width'] = $aFileImgSize[0];
    $aSize['height'] = $aFileImgSize[1];
    $aSize['orientation'] = $sOrientation;
$aImage['size'] = $aSize;//object
    $aCan = array();
    $aCan['remove'] = true;
    $aCan['save'] = true;
$aImage['can'] = $aCan;//object
$aImage['allowLocalEdits'] = true;

By the way: if anyone has a source where this is explained, by all means comment on this. I couldn’t find it, and I’m not too familiar with backbone.js and the wordpress core yet so I’m just posting my way of solving this problem.

Next in line: finding out why my own images are not being inserted into the post/page

Related Posts: