---
title: "Avatar block"
description: "An inline round profile image from an upload."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/payload/blocks/avatar
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/llms.txt
---
> This page isn't translated yet. Showing English.


The Avatar block places a round profile image inline.

![The avatar block fields in the Payload editor](./images/avatar.light.webp)

## Where it is offered

Offered in every tier: `root`, `region`, `fragment` and `slot`, as an inline block that sits inside a line of text.

## Fields

<!-- generated:block-fields avatar -->

| 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"`                                                                                                                                  |

<!-- /generated -->

## Rendered output

Renders the [Avatar component](https://docs.systhema.app/cs/components/avatar.md).

## Converter

`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.

## Customizing

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](https://docs.systhema.app/cs/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/cs/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/cs/payload/frontend/live-preview/client-mode.md).

## Related

- [Avatar component](https://docs.systhema.app/cs/components/avatar.md)
- [Quote block](https://docs.systhema.app/cs/payload/blocks/quote.md)