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