We have our wiring closets listed as CIs in our CMDB. We like to attach photographs of the racks to help with planning. Then the engineers can see if there is room for an expansion, or they can envision how a new piece or hardware might fit in the existing space. (Not all hardware is shaped like perfect pizza boxes.)
We wrote a little UI macro to display any photographs that are attached to a record at the bottom of the form, but we found it was really slow to load because the high resolution photographs were so large. We started dreaming up ways we could ship off the images to a web service to generate thumbnails, store the thumbnails back in the ServiceNow database, then display those thumbnails instead of the full-size photos. It seemed like a lot of effort, but it had to be better than having our engineers wait for the huge photos to load every time they opened those CI records.
We stumbled on a better idea that is built in to ServiceNow, but doesn't seem to be publicly documented yet. They have a built-in thumbnailing service for the profile photos. By mimicking the code they use to display your photo at the top of the page, we were able to come up with the following UI Macro.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g2:evaluate var="jvar_attach" object="true">
var attach = new GlideRecord('sys_attachment');
attach.addQuery('table_sys_id', '$[sys_id]');
attach.addQuery('content_type', 'CONTAINS', 'image');
attach.query();
attach;
</g2:evaluate>
<tr>
<td colspan="2">
<div>
<j2:while test="$[jvar_attach.next()]">
<div style="display:inline-block; padding-left:20px;"><a ng-href="/sys_attachment.do?view=true&sys_id=$[attach.sys_id]" class="clearfix" ng-click="previewAttachment($event, entry.attachment)" target="_blank" href="/sys_attachment.do?view=true&sys_id=$[attach.sys_id]"><img ng-if="entry.attachment.thumbnail_path" class="sn-card-component-image ng-scope" ng-src="$[attach.sys_id].iix?t=small" src="$[attach.sys_id].iix?t=small" title="$[attach.file_name]"/></a><div style="text-align:center;"><br/><p>$[attach.file_name]</p><p>$[attach.sys_created_on.getDisplayValue()]</p></div></div>
</j2:while>
</div>
</td>
</tr>
</j:jelly>
The secret sauce seems to be the .iix extension on the image with a size parameter instead of the normal .jpg extension. That causes ServiceNow to generate a thumbnail file of the image the first time you try to display it this way (making subsequent loads faster than the first load).
All the engineers need to do is attach their high-res image to the CI record and then the thumbnail will be automatically created and shown on the CI form because we put in a UI formatter that runs this macro. They click on the thumbnail to get the full-size image.
