Page

[%
var width = 0, height = 0;
if (metadata.image) {
    width  = metadata.image.width;
    height = metadata.image.height;
}
%]
<div class="k-details">
    <div class="k-card">
        <div class="k-card__body">
            <div class="k-card__section k-card__section--small-spacing">
                <div class="k-ratio-block k-ratio-block--4-to-3 k-overflow-hidden">
                    <div class="k-loader"></div>
                    <div class="k-ratio-block__body">
                        <div class="k-ratio-block__centered">
                            <img class="icon" src="" alt="[%=name%]" border="0" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <dl>
        <dt>Name</dt>
        <dd class="k-ellipsis"><span class="k-ellipsis__item">[%=name%]</span></dd>
        [% if (width && height) { %]
        <dt>Dimensions</dt>
        <dd>[%=width%] x [%=height%]</dd>
        [% } %]
        <dt>Size</dt>
        <dd>[%=size.humanize()%]</dd>
    </dl>
</div>

[%
    var width = 0, height = 0, ratio = 0,
        is_image = (file.type == 'image');
    if (file.metadata && file.metadata.image) {
        width  = file.metadata.image.width;
        height = file.metadata.image.height;
        ratio  = 150 / (width > height ? width : height);
    }
    %]
    <div class="k-details">
        <div class="k-card k-card--center">
            <div class="k-card__body">
                [% if (is_image) { %]
                    <div class="k-card__section k-card__section--small-spacing">
                        <div class="k-ratio-block k-ratio-block--4-to-3">
                            <div class="k-loader"></div>
                            <div class="k-ratio-block__body">
                                <div class="k-ratio-block__centered">
                                    <img class="icon" src="" alt="[%=name%]" border="0" width="[%=Math.min(ratio*width, width)%]" height="[%=Math.min(ratio*height, height)%]" />
                                </div>
                            </div>
                        </div>
                    </div>
                [% } else { %]
                    <div class="k-card__section">
                        <span class="k-icon-document-default k-icon--size-large k-icon--accent" aria-hidden="true"></span>
                        <span class="k-visually-hidden">[%=name%]</span>
                    </div>
                [% } %]
            </div>
        </div>
        <dl>
            [% if (is_image && width && height){ %]
            <dt>Dimensions</dt>
            <dd>[%=width%] x [%=height%]</dd>
            [% } %]
            <dt>Size</dt>
            <dd>[%=size.humanize()%]</dd>
            <dt>Attached by</dt>
            <dd>[%=attached_by_name%] <small>on [%=getAttachedDate(true)%]</small></dd>
        </dl>
    </div>