Setting Image Variables in Email Templates

Overview

Neon Blue supports fully dynamic images in email templates through structured image variables. These variables are defined under event.extra and referenced in the template using {{ }} syntax. This allows any image in the image pool to be used in any dynamic image slot defined in the template.

This page covers how to correctly define and use image variables so they render and preview properly.

Image Variables and Template Syntax

Image variables must be referenced directly in the template using handlebar-style syntax.

Example

{{event.extra.header_img.src}}
{{event.extra.header_img.alt}}
{{event.extra.header_img.href}}

The variable name (for example, header_img) defines the image slot. Any image in the image pool can be selected for that slot during preview or testing.

Image Variable Structure

All image variables live under the event.extra namespace and support the following fields:

Each image block supports:

• src - image URL

• alt - alt text

• href - click-through URL (optional)

Example

event.extra.block1_img.src
event.extra.block1_img.alt
event.extra.block1_img.href

This structure applies to all image placements, including headers and body blocks.

Image Naming Requirements

The variable name must include img. This is required so the editor knows the variable represents an image and can surface the image selector.

Valid examples

• header_img

• h1_img

• block1_img

• block2_img

• block3_img

• block4_img

If img is not present in the variable name, the variable will not be treated as an image.

Header Images

Header images follow the same structure as body images.

Example

event.extra.h1_img.src
event.extra.h1_img.alt
event.extra.h1_img.href

This allows header images to be independently previewed and swapped.

Linking Behavior

If a href value is provided {{event.extra.header_img.href }}, the image will render as clickable. If omitted, the image will render without a link.

This allows linking behavior to be controlled independently from the image asset itself.

Best Practices

• Always reference image variables using {{ }} syntax

• Always define image variables under event.extra

• Include img in the variable name

• Use src, alt, and href consistently

• Treat each image block as a standalone variable

• Upload only context-appropriate images for preview testing

Following this structure ensures predictable rendering, clean previews, and safe dynamic image testing across all email templates.