The template editor on the add and edit pages has two panes: settings and layers on the left, a live canvas preview on the right. Everything you change is reflected in the preview after a short delay. The preview is a browser rendering and may differ slightly from the PNG produced by the server.
Style presets
The Style Presets section offers six starting points: Split Panel, Full Bleed, Minimal Light, Dark Immersive, Editorial and Bold Accent. Clicking one replaces all current layers (you are asked to confirm if the template already has layers) and sets the background colour. Placeholder variables in the preset are swapped for the variables of the selected resource type, so change Resource type first, then apply the preset.
Layers
Layers are drawn in list order, first at the bottom. Add a layer by choosing a type next to + Add Layer and clicking the button. Drag the handle on the left of a layer to reorder it. Click a layer header to expand its fields and select it on the canvas; click the x to remove it.
| Layer type | Fields |
|---|---|
| Text | Content, X, Y, Font size, Weight, Color, Max width, Max lines, Line height |
| Rectangle | X, Y, Width, Height, Color |
| Line | X, Y, Width, Height, Color (drawn as a filled rectangle) |
| Image | Source URL, Fallback URL, X, Y, Width, Height, Fit, Border radius, Rotation, Fade edge, Fade color, Fade strength, Tint color, Tint opacity, Shadow blur, Shadow X, Shadow Y |
Positions and sizes are in canvas pixels. Text wraps to Max width; lines beyond Max lines are dropped and the last visible line is trimmed with an ellipsis. Weight accepts 400, 700, bold and similar; bold, 700, 800 and 900 render in Inter Bold, anything else in Inter Regular.
For image layers, Fit is cover (crop to fill), contain (letterbox) or fill (stretch). Fallback URL is used when the source resolves to an empty value, for example an item with no thumbnail. Border radius is applied in the editor preview only; the server-rendered PNG does not round image corners.
Image styles
Each image layer has quick-apply buttons: Plain, Fade ↓, Fade →, Dark Tint, Shadow and Tilt. They fill in the effect fields, which you can then fine-tune:
- Fade edge, colour and strength draw a gradient from one edge of the image.
- Tint colour and opacity lay a translucent colour over the whole image.
- Rotation turns the image by the given degrees, cropped to the layer box.
- Shadow blur and offsets draw a drop shadow behind the image. On the server the blur needs the Imagick extension; without it the shadow is a solid offset rectangle.
Variables
Text content, image source and fallback fields accept {{variable}} placeholders that are filled with the resource's metadata at render time. Click the {{}} button next to a field to pick from the variables available for the selected resource type. Filters such as {{item.description | truncate(120)}} can be appended. See Template Variables for the full list.
Working on the canvas
- Click a layer on the preview to select it. The matching entry in the layer panel expands.
- Drag a selected layer to move it.
- Drag the corner and edge handles to resize a rectangle, line or image. For text layers the horizontal handles change Max width and the vertical handles change Max lines.
- With a layer selected and focus outside a form field, use the arrow keys to nudge it by 1 px, or Shift + arrow for 10 px. Press Escape to deselect.
Previewing with real data
The preview initially renders with empty variables. To see real content:
- Choose the Resource type.
- Enter a resource ID in the Resource ID box and click Load (on the add page) or Load real data (on the edit page), or click Random to pick a random resource of that type.
The Random button does not support the Search type. Preview data is loaded without a site context, so {{site.title}} shows the installation title rather than a specific site's title.
Raw JSON
Click Toggle raw JSON to show the Layout JSON textarea. The layer panel and the JSON stay in sync in both directions, so you can paste a layout, hand-edit a value the fields do not expose, or copy the JSON to another template. Invalid JSON is rejected on save with "Layout JSON must be valid JSON." See Layout JSON for the format.