You can return an uploaded material as an image in query results by building an HTML export that references the material stream. This pattern is useful when staff need to scan a list with visual context, such as headshots, ID images, or other record materials.
⭐ Get Inspired
This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!
Before you begin
The image must already be uploaded as a material on the record.
The query must be able to join from its base record to the relevant material.
The result will render only for users who have permission to view the material.
Create the material join
Open the query that should display the image.
Add a join from the query base to Materials.
Add filters that restrict the join to the desired material type, such as a headshot material.
Add exports for the material stream and, if useful, the material GUID or memo.
Create the image HTML export
Add a formula export that outputs an HTML img tag. The image source should use the material stream value in the material tile endpoint.
'<img src="/manage/database/acquire?cmd=tile&id=' + [stream export] + '&pg=0&z=14" width="100" alt="" />'Replace [stream export] with the export or SQL expression that returns the material stream value in your query.
📝 Note
The exact formula syntax depends on how your query exposes the material stream value. Build and test the material join first, then add the HTML wrapper after you can return the stream value reliably.
Return multiple images
If one record can have multiple matching images, use a dictionary subquery export and Liquid looping to render each image. The following pattern shows the HTML structure used by dashboard examples:
{% for item in images %}
<div style="float:left;width:220px;">
<a href="/manage/lookup/material?id={{item.guid}}&cmd=display" target="_blank">
<img src="/manage/database/acquire?cmd=tile&id={{item.stream}}&pg=0&z=14" width="200" alt="" />
</a>
<br />
{{item.memo}}
</div>
{% endfor %}Test the output
Run the query for records with and without the selected material.
Confirm that the image appears for records with matching materials.
Confirm that users without material access do not receive unintended access through the query output.
Adjust the image width or zoom value only after confirming that the image renders correctly.