How to use Liquid to show images from an activity's attribute

Overview

It is possible to display an image in a campaign’s email message, where this image is sourced from an activity’s attribute, whose value is a image URL.

Learn more about personalizing campaign content with liquid.

Custom activity with image attribute

Consider a custom activity named Booked trip, which includes the following attributes:

Booked trip (name of activity)
Trip name
Destination
Destination image (containing a valid image URL)
Arrival date
Departure date

After a customer completes their booking, a confirmation email message can be sent that displays all details of the activity's attributes for the booked trip including the destination image (above).

How to display an image from an activity attribute in an email

To display an image from an activity’s attribute in an email message for a playbook, journey or email campaign:

From the email message’s Content page, determine the Liquid syntax for the activity’s attribute (merge tag) that contains the image URL (e.g. activity.custom.booking-complete.destination-image).
Drag a new HTML box across to the email content editor, and click within this new element.
Remove the existing HTML code and replace it with the following HTML:

html
 <img src="{{ LIQUID-SYNTAX-FOR-YOUR-ACTIVITYS-ATTRIBUTE-WITH-IMAGE-URL }}">

4. Replace LIQUID-SYNTAX-FOR-YOUR-ACTIVITYS-ATTRIBUTE-WITH-IMAGE-URL with Liquid syntax generated in step 1 above.

Example of how to add an HTML block in the email editor.

TIP: If the availability of a valid image URL for this activity’s attribute cannot be guaranteed, you can use Liquid syntax’s [default] filter to specify a fallback image, e.g.


 {{ activity.custom.booking-complete.destination-image | default: 'my.cdn.url/image }}

NOTE: The image may not appear in the email editor. However, if the URL is valid, the image will display correctly in the actual email.

It's best practice to send a few test emails before launching the campaign or making the email live.