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

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.

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

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

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.

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.

Last updated