# 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>