# How to Add a User's Profile Picture to a Kanban Card

{% hint style="info" %}
Adding a visual element like a user's profile picture directly onto a Kanban card can significantly enhance the user experience. It allows for a quick and intuitive understanding of record ownership, making your Kanban board more scannable and user-friendly. This guide will walk you through the steps to insert an Opportunity Owner's Chatter profile picture into a Kanban card.
{% endhint %}

Here is an example of what the Kanban cards can look like after implementing this customization:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fp6h6Zkneb2u2UKvu8GQi%2Fimage.png?alt=media&#x26;token=a73c6599-e965-4ff4-b11a-3916e626af89" alt=""><figcaption></figcaption></figure>

**Step-by-Step Guide**

To add the owner's profile picture, we will add a new text field to the card layout and use CSS to set the user's profile picture as the background of that field.

**1. Add a Text Element to the Card Layout**

First, open the **Card Builder** for your Kanban board. From the **Elements** panel on the left, drag and drop a **Text** component onto the card canvas in your desired location.

**2. Configure the Text Element**

With the new Text element selected, the **Settings** panel will appear on the right. Make the following changes:

* **Type**: Ensure it is set to Text.
* **Value**: **Delete any existing value** in this field to make it empty. This is crucial as we only want to display the background image.
* **Width**: Set the width to 50 Percent (or adjust as needed for your layout).

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FGXmX8jF1P7QQegaLc6UZ%2Fimage.png?alt=media&#x26;token=b51aa233-665b-4e53-aa86-88b14d0ce95b" alt=""><figcaption></figcaption></figure>

**3. Apply Custom CSS for the Profile Picture**

Now, we will add the custom CSS to pull in the user's photo and style the element.

* In the **Settings** panel on the right, expand the **CSS Styles** section.
* Add the following CSS properties by clicking the + icon for each new line:

| **Name**          | **Value**                                 |
| ----------------- | ----------------------------------------- |
| background-image  | url('{!Opportunity.Owner.SmallPhotoUrl}') |
| background-repeat | no-repeat                                 |
| min-width         | 48px                                      |
| max-width         | 48px                                      |
| min-height        | 48px                                      |
| max-height        | 48px                                      |
| background-size   | contain                                   |
| border-radius     | 48px                                      |

This CSS configuration will use the owner's small photo URL as a background image, ensure it doesn't repeat, set a fixed size for the container, and use border-radius to create a circular shape.

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FofT9PU8fXU1s4oWn7hhK%2Fimage.png?alt=media&#x26;token=4d31ae55-f075-4676-9c07-c640a934568e" alt=""><figcaption></figcaption></figure>

**Advanced Customization**

You can further enhance this feature with conditional logic for users who may not have a profile picture uploaded.

* **Fallback Images**: Use a formula in the background-image style to display a default avatar if the user's photo is not available.
* **Background Color**: Specify a background-color as a fallback. This color will be visible if the image fails to load or if the user does not have a profile picture.

By following these steps, you can create a more visually engaging and informative Kanban board for your users.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/howtos-and-best-practices/how-to-add-a-users-profile-picture-to-a-kanban-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.