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 — what 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 our Cover Image — or maybe a Hero Image.
​

Doesn't really matter too much. 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 we're going to let a user choose a new cover image is by holding their finger on one of the images.
​

That is what we call a long press — another type of gesture, another way users can interact with your mobile app.

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

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

I can make this a little more descriptive and call it the Horizontal List Item Image.

I don’t want to hit Add Workflow here because, by default, that just adds an is tapped workflow — when we’re after something slightly different.
​

So I’ll delete that.

The one we want, we’ll create by hitting New Workflow within the Workflow tab.
​

Under Elements, choose An Element is Pressed.

When we set this up, we first choose what element the user is going to long-press — that’s our Horizontal List Item Image.
​

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

By default, it’s set to 500 milliseconds (half a second).
​

We’ll leave it at that for now.

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

Pretty straightforward, right?
​

We’ll make changes to a thing — specifically, the Trip.

We’ll find the trip inside of that trip property in our Trip Details view (which we’ve already set up earlier).
​

The field we want to change is Cover Image.

And what do we want to set it to?
​

Probably the image that they’ve done the long press on — so, the Current Item’s Image.

To test this out, note that in the database right now, our Italy Backpacking Trip does not have a cover image.
​

If I hold my finger on one of these images for at least half a second, and then check the database again — aha!
​

We have a cover image set. Brilliant.

Now, maybe we want a visual indicator in our interface to show that this image is, in fact, the cover image for the trip.

Let’s add a little icon to the image.
​

I’ll add it as a Button, so I can use the style we already created for semi-transparent icons.

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

Set it to Fit width to content.
​

Because it’s not really a button, I’ll make it small and adjust the icon size.

Right now, it’s appearing on all the images — but we only want it to appear on the cover image.

Let’s set up the logic for that.

We’ll call it Icon Pin, and by default, it will not be visible.
​

We’ll add a condition under which it becomes visible.

That condition will compare two things:

We’ll compare their URLs, so:

If those two URLs are the same, then this element should be visible.

Now you’ll see the pin on the first image only — not on the others.
​

But if I long-press another image, that one becomes the new cover image, and the pin moves accordingly.

That’s handy, but maybe a little vague as an action — users might not realize what just happened.

Let’s add some feedback to let them know.

We’ll create a Sheet and call it New Cover Image Alert.
​

Inside, we’ll add a Text element: “New trip cover image selected.”
​

We’ll center it, increase the font size, and add a Close button (style: Secondary).

We’ll add some padding around the sheet — top, bottom, and sides — make sure it fits to content, and maybe add a blur backdrop.

The Close button will simply hide the sheet.

Then, in the Long Press workflow (which we can rename to “New Cover Image”), after we set the cover image, we’ll show this sheet.

Now, when I long-press an image, I get a little alert that I can swipe down or close.

We also want to let users set a trip cover from one of their Diary Entries, using the More Menu — since the long-press gesture might be a bit 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 set the label to Set Image as Trip Cover.

When this button is clicked, we want to:

So, we’ll:

Then, to complete the user experience, we’ll hide the sheet menu.

Now, when I click Set Image as Trip Cover and go back to the Trip Details view, the appropriate image is pinned.

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

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

This will be the Cover Image, and we’ll pull it from:
​Current Item’s Trip → Cover Image

For display mode, choose Zoom, so it crops nicely within the element.

By default, it looks okay, but we have a few issues:

Let’s fix that first.

Rule: If the trip has a cover image, show this image element.
​

Otherwise, hide it.

We’ll make the image not visible by default, and add a condition:
​When Current Item’s Trip’s Cover Image is not empty → This element is visible = true.

That hides the empty image space for trips without a cover.

Next, let’s fix the layout.

We don’t want padding around the whole Vertical List Item — only around the text.

Select the title and date text elements, hold Shift, and group them into a Column Container.
​

Add padding (12px top/bottom, 16px sides) to that group, not the whole item.

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

The image has rounded corners all around, but we only want the top corners rounded.

On the image element, enable Define each border independently.
​

Set Top Left = 8, Top Right = 8, Bottom Left = 0, Bottom Right = 0.

Now the top corners match the card shape, and the bottom edges are square.

The gap between the two text elements looks too big.

The bottom text element likely has a minimum height (e.g., 44px).
​

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

Now the spacing looks tighter and cleaner.

We also don’t need the swipe delete actions anymore, since we added a delete option to the menu — just select them and hit Backspace.

Finally, we want new trips to automatically get a cover image when the user adds their first diary entry that includes an image.

In the Save workflow on the Diary Entry Details page — where we mark an entry as published — we can add this logic.

After the Save action:

Now, when a user saves their first diary entry with an image, that image becomes the trip’s cover automatically.

If we test it:

Aha — the image appears as the trip’s cover, and it displays perfectly in the main Trips view.

Our app is now full of beautiful images — all supported by users being able to take or upload photos and set or update cover images easily.

In the next lesson, we’ll allow users to add locations to their diary entries — so we can display them in the app and on a map view.