image
A single image slot — the resolved value is always one `ImageValue`, never a list, so it carries no count bounds (a list of them does).
A single image slot — the resolved value is always one ImageValue, never a
list, so it carries no count bounds (a list of them does). crop/frame drive the
editor’s cropper and the renderer’s <Image> box; sourceFilter narrows the
candidate pool the editor offers, routing the slot to a dedicated picker.
fill takes an imageAssign, or a contactAssign naming one of a contact’s
image fields — the alternative to source, never its companion.
Import from @homepages/template-kit.
Signature
Section titled “Signature”function image<const HasSource extends SlotSource | ComputeBinding<unknown> | undefined = undefined>(opts: ImageOptions & { source?: HasSource; fill?: ImageFill; } & WritebackOption<HasSource> & FillOption<HasSource, ImageFill>): ImageSlotDef & SourceMark<HasSource> & FillMark<ImageFill>Parameters
Section titled “Parameters”| Name | Type | Required | Description |
|---|---|---|---|
opts |
`ImageOptions & { source?: HasSource; fill?: ImageFill } & |
WritebackOption<HasSource> & FillOption<HasSource, ImageFill>` | required | |Returns
Section titled “Returns”ImageSlotDef & SourceMark<HasSource> & FillMark<ImageFill>
Example
Section titled “Example”import { image } from "@homepages/template-kit";
image({ label: "Floor plan", sourceFilter: "floorplans" });