Return Images in Query Results

You can display an image from a record's Materials tab in query results using a formula subquery export.

⭐ 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

To see this in action, you must have a test record handy with an image in its materials. Upload an image to the Materials tab of a person record. Select your image material type. Use that same material type in the filters below.

📖 Uploading Materials

Import our example query

Copy this Suitcase ID and paste it in Database → Suitcase Import to import a pre-made example query:

5013e1e1-1a5e-4101-bd6c-ebc7a75a1414:slate-advancement-showcase

This example query, from our Advancement Showcase, uses person record headshots as the image. Besides this being used in export names, it is used in the Headshot Exists subquery filter—so unless you also happen to have a Headshots material type, you’ll need to swap this filter value out for a type that refers to images.

Selecting only records with images

Open a query with the base Configurable Joins - Person, then select Edit Query.
Add person exports, such as Person First and Person Last, to identify each record.
Add a Subquery Filter and name it Image Exists. Set Aggregate to Exists.
In the subquery filter, add a join to Materials.
Add the Materials / Name filter and select your image material type.
Save the filter and the subquery filter.

Creating the image HTML export

A Concatenate subquery export combines the start of an image tag, the material's stream value, and the end of the image tag.

Add a Subquery Export and name it Image.
Set Output to Concatenate and Row Limit to 1. Leave Export Separator blank.
Within this subquery export, add a join to Materials. Add the Materials / Name filter and select your image material type.
In Exports, add a Literal. Enter the following value, then save the literal:
```
<img src="/manage/database/acquire?cmd=tile&amp;id=
```
Add a Subquery Export inside the image export. Name this nested export stream and set Output to Formula.
In Formula, enter exactly [stream]. Slate supplies the stream value for the joined material.
In the nested export's Exports section, add a Literal. Set its name and value to stream, then save the literal. The Formula subquery requires an export in this section.
Save the nested stream subquery export to return to the image export.
Add a final Literal. Enter the following value, then save the literal:
```
&amp;pg=0&amp;z=100" height="100px"/>
```
Keep the exports in this order: the opening literal, the stream subquery export, and the closing literal.
Set Format Type to HTML.
Save the image export.

Adjusting image presentation

You can change the subquery export’s final Literal value to adjust the image size and shape.

Small circle

A circular image, 50 pixels wide and 50 pixels high.

&amp;pg=0&amp;z=100" style="border-radius:50%;width:50px;height:50px;object-fit:cover;"/>

Small square

A square image, 50 pixels wide and 50 pixels high.

&amp;pg=0&amp;z=100" style="width:50px;height:50px;object-fit:cover;"/>

Both options use object-fit: cover to fill the specified area without stretching the image. Parts of the image can be cropped. For a larger image, change both 50px values to 100px.

Viewing images in the query results

View the images returned by the query in Preview Results or by selecting Run Query.