Authoring Layouts Image

Authoring Layouts — Image

An image layout element displays a static pack-bundled image, optionally processed by the image filter system. Use it for decorative artwork, branding, separators, headers, or anything that should be a flat picture rather than a tracked item.

See Authoring Layouts for the file format and base fields. This page only covers fields specific to the image type.

JSON schema

Parsed in EmoTracker.Data/Layout/Image.cs. Matches the image branch in layouts.json.

Field	Type	Required	Default	Description
type	"image"	yes	—	Literal string.
image	string	yes	—	Pack-relative path to the image file (typically a PNG).
image_filter	string	no	none	An image filter spec applied to the image at load time.

Plus the standard base fields from Authoring Layouts → Fields every layout element shares.

Examples

A static decorative image

{
  "type": "image",
  "image": "images/banner.png",
  "width": 400,
  "height": 80
}

An image with a filter applied

{
  "type": "image",
  "image": "images/background.png",
  "image_filter": "saturation|0.6, brightness|0.7"
}

This loads background.png and applies a desaturate-and-darken filter at parse time. See Authoring — Image Filters for the full filter syntax.

A logo in a header bar

{
  "type": "dock",
  "content": [
    {
      "type": "container",
      "dock": "top",
      "height": 60,
      "background": "#FF111111",
      "content": {
        "type": "image",
        "image": "images/logo.png",
        "h_alignment": "left",
        "margin": "10"
      }
    },
    {
      "type": "itemgrid",
      "rows": [ [...] ]
    }
  ]
}

Tips and pitfalls

• Image paths are pack-relative. They resolve via the same loader as item icons — drop the file anywhere in your pack and reference it by relative path.
• Filters run once at parse time. They don't re-apply when the runtime re-renders, so there's no per-frame cost. Stack as many filters as you need for the look you want.
• Image elements don't auto-respond to clicks. They're decorative. If you want a clickable image, use a Button Popup with style: "image" instead.
• Use width and height for predictable sizing. Without them the image displays at its native pixel size, which can produce jagged scaling on high-DPI displays.
• Don't pre-bake filters into your PNGs. Use the image_filter spec — it keeps your pack smaller and lets you tweak the look without re-exporting assets.

See also

• Authoring Layouts — top-level format and base fields
• Authoring — Image Filters — full syntax and built-in filters
• Authoring Layouts — Button Popup — for clickable image elements
• layouts.json schema — authoritative JSON schema