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

1 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’d like to keep using as much WP functionality as possible, even use WP’s attachment template , since it’s only other images that need to be shown, but basic functionality stays the same.

Read More

The problem I’m running into, is that WP won’t show the data.size.url in it’s template. It stays empty.

This is the WP template (I left out the bottom part since it’s not relevant to this post): 

<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="{{ 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>
    </script>

And this is my object: 

$aFileImgSize = getimagesize($sFolderUrl);

$aImage = array();
$aImage['uploading'] = false;
$aImage['id'] = $sFolderUrl;
$aImage['full'] = $sFolderUrl;
$aImage['thumbnail'] = $sFolderUrl;
$aImage['link'] = $sFolderUrl;
$aImage['caption'] = $sFile;
$aImage['type'] = 'image';
$aImage['size']['url'] = 'test';
$aImage['width'] = $aFileImgSize[0];
$aImage['height'] = $aFileImgSize[1];
$aImage['subtype'] = $aFileImgSize[2];

if($aImage['width'] >= $aImage['height']){
    $sOrientation = 'landscape';
}else{
    $sOrientation = 'portrait';
}
$aImage['orientation'] = $sOrientation;

$aSize = array();
$aSize['url'] = $sFolderUrl;
$aSize['width'] = $aFileImgSize[0];
$aSize['height'] = $aFileImgSize[1];
$aSize['orientation'] = $sOrientation;
$aImage['size'] = $aSize;

$images[] = $aImage;

I seem to be missing something…

The $images array is echo’d back with a json_encode of course

When I change the WP template from data.size.url to data.thumbnail, the correct value shows. Probably something stupid, but I hope someone can point out my stupidity then 😉

Previous post about this plugin can be found here:
print_media_templates not applied in media manager plugin

Post Views: 1

Related posts

1 comment

  1. 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="{{ 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

Comments are closed.