Avatar block
An inline round profile image from an upload.
On this page
The Avatar block places a round profile image inline.
Where it is offeredLink to this section
Offered in every tier: root, region, fragment and slot, as an inline block that sits inside a line of text.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
_tier | select | Options: root (Root), region (Region), fragment (Fragment), slot (Slot), stack (Stack) | ||
alignSelf | radio | Align Self | center | Shown when siblingData?._tier==="stack"; Required; Shown when siblingData?.setSelfAlign; Options: start (Start), center (Center), end (End), stretch (Stretch) |
flex1 | checkbox | Flex 1 | false | Shown when siblingData?._tier==="stack" |
grow | checkbox | Grow | false | Shown when siblingData?._tier==="stack" |
image | upload | Select image | Required; Related to uploads | |
message | ui | Shown when siblingData?._tier==="stack" | ||
setSelfAlign | checkbox | Define Self Alignment | false | Shown when siblingData?._tier==="stack" |
shrink | checkbox | Shrink | false | Shown when siblingData?._tier==="stack" |
Rendered outputLink to this section
Renders the Avatar component.
ConverterLink to this section
avatarConverter reads the populated image upload and passes its URL and alt text to <Avatar>. A missing upload or numeric upload ID renders nothing; resolve relationships before rendering.
CustomizingLink to this section
Import AvatarBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'inline' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing avatar 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.