admin管理员组文章数量:1323529
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.
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
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.
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
Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Sep 24, 2013 at 7:54 AnnekeAnneke 914 bronze badges1 Answer
Reset to default 0Problem 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
本文标签: jsonattachment mediatemplate data model (datasizeurl)
版权声明:本文标题:json - attachment media-template data model (data.size.url) 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742130147a2422121.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论