# 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.