In this video, we're going to learn how we can set a cover image for our trips — to display here within the main trips view — and allow our user to set a new cover image by either holding down on one of the images (what we call a long press) or by setting a new cover image via the more menu.

That piece of information — which image we're going to display for a particular trip on this view — needs to be stored in a field.
​

And that suggests, of course, that we need to add a new field to our Trip data type.

We can just call this field Cover Image (or maybe Hero Image — doesn’t really matter).
​

It is, of course, type: image.

We'll get to how we display it on our trips view in a minute, but first, let's work out how we actually set one of our images as the cover.

One of the ways that we’re going to let a user choose a new cover image is by holding their finger on one of the images — that is, performing a long press.

It’s another type of gesture, another way users can interact with your mobile app.

To set up a long press, let’s find the element we want the user to long-press on — i.e. hold their finger down on for some amount of time.
​

That’s this Horizontal List Item on our Trip Details view.

I’ll make this a bit more descriptive and call it Horizontal List Item Image.

Now, I don’t want to hit Add Workflow directly because by default that adds an is tapped workflow, when we actually want something different. So I’ll delete that.

The workflow we want, we’ll create by hitting New Workflow.
​

Under Elements, select An Element is Pressed.

Now, we choose which element the user will long press — that’s our Horizontal List Item Image.
​

Then we set the Minimum Duration — how long should the user hold before the workflow fires?
​

By default, it’s 500 milliseconds (half a second). We’ll leave it at that for now.

Let’s add our action — this will set the image as the trip’s cover image.

Pretty straightforward:

To test this, note that in the database right now, our Italy Backpacking Trip has no cover image.

If I hold my finger on one of these images for half a second, and check the database again — aha! The Cover Image field now has a value. Brilliant.

Now, in our interface, maybe we want a visual indicator that shows which image is the cover image.

Let’s add a little icon.
​

I’ll add it as a Button, so we can reuse our semi-transparent icon style.

The icon could be a star or a pin indicator.
​

Set it to Fit width to content, make it relatively small, and adjust the icon size.

Right now, the icon appears on all the images — but we only want it to show on the cover image.

So, let’s set up the logic.

We’ll rename the button to Icon Pin, and by default it will not be visible.
​

Add a condition for visibility:

To make the comparison work, compare URLs — the URL of the current item’s image and the URL of the cover image.

If those match, set: This element is visible = true.

Now, the pin only appears on the image that matches the cover image.

If I long press on another image, that image becomes the new cover, and the pin moves accordingly.

That’s great, but the action might be a bit vague for users. They might not realize what just happened.

Let’s add an alert or confirmation message using a Sheet.

Create a new sheet called New Cover Image Alert.
​

Add a Text element: “New trip cover image selected”.
​

Make the font slightly larger, center it, and add a Close button (styled “Secondary”).

Add padding around the sheet, make sure it fits to content, and maybe add a blur backdrop for a polished look.

The close button should simply hide this sheet.

Now, go back to your Long Press workflow and add another action: Show Sheet “New Cover Image Alert.”

Now, when I long press on an image, I get a little confirmation sheet that I can swipe down or close.

We also want users to set a trip cover from the More Menu within a diary entry — since the long-press gesture might be ambiguous.

Inside the Diary Entry Details view, open the More Menu group.
​

Duplicate the Edit button (Cmd/Ctrl + D).
​

Change the icon to an Image, and the label to “Set Image as Trip Cover.”

Now, when this button is clicked, we want to:

So, the workflow:

Finally, hide the sheet menu to close it.

Now, when I click Set Image as Trip Cover, and go back to the trip details view — the pinned image updates accordingly.

Let’s display that cover image within our Trips View.

Inside the Vertical List Item that shows each trip’s title and start date, add an Image element.

Set the Dynamic Image to:
​Current Item’s Trip → Cover Image.

For Display Mode, choose Zoom — so it crops nicely.

Now, by default, it looks okay — but there are a few issues:

Let’s fix the empty space first.

Rule:
​

If the trip has a Cover Image, show the image element. Otherwise, hide it.

To do this:

That hides the image element when there’s no cover image, cleaning up the layout.

Now, let’s fix the padding.

Right now, the Vertical List Item has padding around everything. We only want padding around the text.

So:

Now the image spans the full width — looks much better.

Currently, the image has rounded corners on all sides.
​

We want only the top corners rounded — to match the card shape.

To do this:

Now the top corners are nicely rounded while the bottom edges remain square.

The gap between the two text elements (title and date) looks a little too big.

Check the bottom text element — it likely has a minimum height (e.g., 44px).

Remove that minimum height (keep “Fit height to content” checked).
​

Now the spacing is tighter and cleaner.

Also, since we added a delete button to the context menu earlier, we can remove the old swipe delete actions — just select them and hit Backspace.

Finally, let’s handle trips that don’t have any cover image yet.

When a user creates their first diary entry that includes an image, that image should automatically become the trip’s cover image.

We can do this in the Save workflow on the Diary Entry Details page.

When the user clicks Save, we already change the diary entry from draft to published.
​

At that point, we can also check:

If the parent trip’s cover image is empty, set it to this diary entry’s image.

So:

Now, when the first diary entry with an image is saved, that image becomes the cover automatically.

If we test this:

Aha — we see the image appear as the trip’s cover.
​

Back in the main Trips view, it shows perfectly.

So now, our app is full of beautiful images — all supported by the ability for users to:

In the next lesson, we’ll take this one step further by allowing users to add locations to their diary entries — so we can display them both in the app and on a map view.