---
url: https://gudhub.com/docs/gh-elements/avatar/
title: "Avatar\n                #"
description: "Avatar is a gh element that allows you to create a header image with a person's name for your items. It is most often used in conjunction with the Conversation"
lang: uk
updated: 2026-09-08T15:46:43.195Z
---

# Avatar [#](https://gudhub.com/docs/gh-elements/avatar/#avatar)

**Avatar** is a gh-element that allows you to create a header image with a person's name for your items. It is most often used in conjunction with the [Conversation element](https://gudhub.com/docs/gh-elements/conversation-element/). In this case, the avatar is a classic chat avatar.

![Using the avatar](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-work.jpg "Avatar usage")

It has no special purpose other than to summarize information about the user. If you use it with [Conversation](https://gudhub.com/docs/gh-elements/conversation-element/), it can also be filled in automatically if you make the source fields for the avatar [image](#images-field) and [name](#user-name-field) the [destination fields for Conversation](https://gudhub.com/docs/gh-elements/conversation_element/#conection-settings).

## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/avatar/#functional-characteristics)

As mentioned above, this element is mostly used to create full-fledged chats with [Conversation](https://gudhub.com/docs/gh-elements/conversation-element/) and [Cards](https://gudhub.com/docs/gh-elements/cards/).

![Using avatar with conversation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-conversation.jpg "Avatar in chats")

But it can also be used to represent the content of items. Namely, since an avatar is the most useful for people's information, it can display a photo and a person's name at the top of the item.

![Using the avatar in items](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-item.jpg "Avatar in items")

## Element Options [#](https://gudhub.com/docs/gh-elements/avatar/#element-options)

The settings for the current element consist of only one set of settings.

### Field Settings [#](https://gudhub.com/docs/gh-elements/avatar/#field-settings)

This is a set of settings that provides all the necessary settings for configuring the element.

![Settings of avatar field](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-field-setting.jpg "Field settings")

| Name | Description |
| :-- | :-- |
| Application | allows you to select the source application for the element; [details..](#application) |
| Images Field | allows you to select field that stores required images; [details..](#images-field) |
| User Name Field | allows you to select the source field for the user name; [details..](#user-name-field) |
| Show User Name | allows you to set whether the user name will displayed or not; [details..](#show-user-name) |

#### **Application** [#](https://gudhub.com/docs/gh-elements/avatar/#application)

This is the setting where you have to select the application for the following element settings. The source fields for an [image](#images-field) and a [user name](#user-name-field) will be taken from the current app.

#### **Images Field** [#](https://gudhub.com/docs/gh-elements/avatar/#images-field)

The next setting allows you to select the multiple fields from which the images for the avatar will be taken. This is the image that will be displayed inside in the circle. Here you can select several fields, and the image will be taken from one of them.

> Note that **all these fields must be [Image](https://gudhub.com/docs/gh-elements/image/) elements**.

Of all the fields, priority is given to the first selected one. That is, if three fields are connected here and all of them have images, the image will be taken from the field that was selected first in this setting.

![Image priorities](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avataer-image-field.gif "Multiple images")

> If all fields are empty, an abbreviation of the [User Name](#user-name-field) will be displayed in the circle.

#### **User Name Field** [#](https://gudhub.com/docs/gh-elements/avatar/#user-name-field)

Here you have to select the field that contains the name of the user. The value of the selected field will be displayed below the avatar circle if the [Show User Name](#show-user-name) setting is enabled. But the main role it plays is in abbreviation. When there is no photo in the avatar circle, two capital letters taken from the value of the current field will be displayed there:

-   the first letter of the first word;
-   the first letter of the last word.

#### **Show User Name** [#](https://gudhub.com/docs/gh-elements/avatar/#show-user-name)

The last setting of this element allows you to show or hide the [User Name](#user-name-field). If the current setting is enabled, the [user name](#user-name-field) is displayed below the avatar circle. This text can be customized with some [style settings](#element-style). If the setting is disabled, the [user name](#user-name-field) will not be displayed at all.

## Element Style [#](https://gudhub.com/docs/gh-elements/avatar/#element-style)

This element has a [full set of style settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/). That is, there are no additional settings that would greatly affect the appearance of the element. The only customization to which the current element is subject is to change the [interpretation types](#interpretation) and [Show User Name](#show-user-name) setting.

![Settings of avatar style](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-element-style.jpg "Style settings")

## Filtration [#](https://gudhub.com/docs/gh-elements/avatar/#filtration)

The **Avatar** is not available for filtering.

## Interpretation [#](https://gudhub.com/docs/gh-elements/avatar/#interpretation)

Interpretations of this element are only responsible for the size of the avatar. There are three sizes in total and, accordingly, three types of interpretation.

![Types of avatar interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/avatar-interpretation-types.jpg "Interpretation types")

### Default [#](https://gudhub.com/docs/gh-elements/avatar/#default)

The first type of interpretation is the default type. It makes the avatar the largest of all interpretations. That is 64 pixels in diameter.

### Medium [#](https://gudhub.com/docs/gh-elements/avatar/#medium)

The next type allows you to create a medium-sized avatar. The diameter is 32 pixels.

### Small [#](https://gudhub.com/docs/gh-elements/avatar/#small)

The last interpretation makes the element the smallest in size, namely 24 pixels in diameter.

## Value Format [#](https://gudhub.com/docs/gh-elements/avatar/#value-format)

This element does not store any value.

## Data Model [#](https://gudhub.com/docs/gh-elements/avatar/#data-model)

The current gh-element has a rather small data model:

Copy

```json
{
    "data_model": {
        "images_app_id": "34166",
        "images_field_id": "810583, 810456",
        "interpretation": [],
        "show_name": 1,
        "user_name_field_id": "810519"
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| images\_app\_id | `string` | _contains the ID of the application from which the photo and name for the element are taken_ |
| images\_field\_id | `string` | _contains the ID of the field in which the image is stored_ |
| interpretation | `array` | _contains all element interpretations_ |
| show\_name | `boolean` | _shows whether the required name will be displayed or not_ |
| user\_name\_field\_id | `string` | _contains the ID of the field in which the name for element is stored_ |