Feature block
A media-and-content band: an image, video or map beside a region editor.
On this page
The Feature block puts one piece of media beside copy. The media column takes an image, a video or a map; the copy is a region editor.
Where it is offeredLink to this section
Offered only in the root tier. Its content field uses the region editor with Columns and Card enabled.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
aspectRatio | select | Aspect Ratio | auto | Shown when hasMedia(siblingData,{image:"image",video:"video",youtube:"youtube",googleMaps:"googleMaps"}); Options: auto (Auto), 21/9-md (21:9 on desktop, 4:3 on mobile), 21/9 (cinema - 21:9), 16/9 (video - 16:9), 4/3 (landscape photo - 4:3), 3/2 (landscape photo - 3:2), 1/1 (square - 1:1) |
autoPlay | checkbox | Autoplay | Shown when siblingData?.mediaType==="video"&&siblingData?.video&&!siblingData?.poster | |
content | richText | Content | ||
controls | checkbox | Controls | true | Shown when siblingData?.mediaType==="video"&&siblingData?.video&&!siblingData?.poster |
float | radio | Media Float | left | Required; Options: left (Left), right (Right) |
googleMaps | text | Define address | Required; Shown when siblingData?.mediaType==="googleMaps" | |
image | upload | Select image | Required; Shown when siblingData?.mediaType==="image"; Related to uploads | |
layoutBg | radio | Background Variant | main | Required; Options: main (Main), alternative (Alternative) |
mediaType | radio | Media Type | image | Required; Options: image (Image), video (Video), youtube (YouTube video), googleMaps (Google Maps) |
parallax | checkbox | Enable parallax effect | false | Shown when hasParallaxMedia(siblingData) |
poster | upload | Poster image (optional) | Shown when siblingData?.mediaType==="video"&&siblingData?.video||siblingData?.mediaType==="youtube"&&siblingData?.youtube; Related to uploads | |
preload | select | Preload | metadata | Required; Shown when condition(siblingData); Options: metadata (Metadata — first frame only (recommended)), none (None — nothing until play), auto (Auto — download the whole video up front) |
theme | radio | Color | default | Required; Options: default (Default), dark (Dark) |
video | upload | Select video | Required; Shown when siblingData?.mediaType==="video"; Related to uploads | |
youtube | text | Paste Youtube URL | Required; Shown when siblingData?.mediaType==="youtube" | |
zoom | number | Default zoom | 14 | Required; Shown when siblingData?.mediaType==="googleMaps"&&siblingData?.googleMaps |
Aspect ratioLink to this section
FeatureBlock aspect ratio. The feature band's media column releases its child's height, so an unconstrained upload's own proportions decide how tall the whole band is — a portrait image can make a feature band several times taller than its copy. FeatureBlock therefore carries the same aspectRatio select as the media blocks (auto / 21:9 on desktop, 4:3 on mobile / 21:9 / 16:9 / 4:3 / 3:2 / 1:1), shown once a media type and its asset are chosen and applied to every media type. It defaults to auto and existing content carries no value, so stored feature blocks render exactly as before until an editor picks a ratio.
Video playbackLink to this section
A Feature with an uploaded video has the same preload control as the Video block; see Video playback and weight.
Rendered outputLink to this section
Renders the Feature component with FeatureMedia and FeatureContent.
ConverterLink to this section
featureConverter selects Image, Video, a YouTube iframe or GoogleMapEmbed from mediaType, then places the converted region content in FeatureContent. float: 'right' reverses the band. Missing or unpopulated media leaves that media area empty. A map also needs a configured key. aspectRatio: 'auto' leaves the media unconstrained; a selected ratio constrains it. Video posters add a play overlay.
CustomizingLink to this section
Import FeatureBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing feature slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.