Guide 04 · Developer docs

Input types, layouts, components and images

The platform's central abstraction, in one line: an input type defines what an editor can enter, a layout area binds one input type to a named slot, a layout groups areas and points at a template, a record or component holds the content for each area, and the template reads it back. Read this book straight after the template languages.

L1–L3

Unit 07 of 09 6 pages

The shorthand, and working with each input type

Updated 23/10/2026 01:45

Reading a layout area as a property, the shorthand, and what each input type gives a template. For developers writing and reviewing page and component templates.

The first three pages explain the shorthand: how it resolves, why it keeps live preview editable and breaks attributes, and the limits that lead to one rule for choosing between the shorthand and an explicit getter. Read them in order; the rest of the guide assumes the rule.

The last three take the input types in turn: text, select and switch areas first, then dates, numbers, colours and code, then the areas that hold objects, files, records and blocks. Use them as reference when a template needs a particular type. Images have their own unit, next.

In this unit

Read in order

01 How the area shorthand resolves Reading an area as a property, such as {$component->heading}, is the house style for printing it. It is not sugar for a getter: it tries a real getter first, then resolves the name by the area's category and editor. The order, and what each type returns. 02 The shorthand and live preview In the admin's live preview, the shorthand keeps every text area editable in place, while getAreaText() keeps only rich text editable. The wrapper that does it, a before and after, why it breaks attributes, and why the shorthand survives an editor change. 03 Limits of the shorthand, and the rule The shorthand resolves areas only on the frontend, loses to a real getter of the same name, throws on an unknown name in Smarty, takes no arguments and is harder to search for. Each limit, its symptom and guard, and the rule reviewers apply. 04 Text, select and switch areas in templates What text, textarea and rich text areas store and how to escape each; reading one select key or many and mapping them onto CSS classes; and why a switch is a boolean through the shorthand but the string 1 through getAreaText(). 05 Dates, numbers, colours and code areas Formatting a date or datetime in both engines and handling an empty one; what number, email and math areas check, which is less than their names suggest; feeding a colour into a CSS custom property; and the escaping decision for a code area. 06 Files, records and component areas Rendering a download link with the file's name and size, and why files are public; linking to a record and reading a set of records once; what the shorthand gives for component and collection areas; and where images are covered.