---
title: Exercise 2 -- Add an image to the Premier credit card image widget
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

## Exercise 2: Add an image to the Premier credit card image widget

Now that you know the basics of working with assets in Xperience, let's add an image to a page that only your editor team will be able to manage. Follow these steps to **add an image to the empty image widget** on the website channel's **Premier credit card** page.

> **Info:** To follow along with the exercise, download a [sample image file](https://download.kentico.com/Training/exercise-sample-manage-files-man-holding-credit-card.png) we prepared for you.

1. **Open the page for editing**
   - In the **Personal Banking** channel, navigate to the **Cards** section.
   - Open the _Premier credit card_ page and **Edit page**.

2. **Select the empty Image widget**
   - The empty image widget needs setup.
   - Open the widget properties to insert the sample image you downloaded.

![Image widget properties](https://docs.kentico.com/docsassets/modules/exercise-2-add-an-image-to-image-widget/empty-image-widget-properties.png "Image widget properties")

3. **Create a new image**

   - In the image properties dialogue, choose _Content hub asset_.
   - To add a new picture, you can select **Create new**, and choose the following in the **Create new item** dialogue:
     1. **Content item name** – Enter a clear, descriptive name, like _Premier credit card holder_.
     2. **Workspace** – Select the _Personal Banking_ workspace.
     3. **Location** – Leave the default _Uncategorized (no folder)_.
     4. **Content type** – Select _Asset_ and **Continue**.
     5. **Description** – Add a meaningful description to help your team understand where and how to use the picture. Like: _Image of a young man holding a credit card, to be used as a Premier credit card product image._
     6. **Alt text** – description of image content to enhance usability. In this case: _Smiling man holding a credit card._
     7. **File** – Upload the _exercise-sample-manage-files-man-holding-credit-card.png_ file.
     8. **Tags** –  Select one or more tags that best describes what's in the image, like _Young people_. Consistent tagging helps with search and asset reuse later.
   - If you're in a rush, you can also **drag** the _exercise-sample-manage-files-man-holding-credit-card.png_ file from your computer and **drop it** into the widget upload zone, instead of creating the asset through the standard dialog shown above.
   - Xperience then starts the upload automatically and creates a new content item asset in the _Content hub_.
   - **Save and Close** your newly created content item. This step will return you to the **Image properties** dialogue, where you can finish setting up your image widget.

   ![Image properties dialogue](https://docs.kentico.com/docsassets/modules/exercise-2-add-an-image-to-image-widget/image-properties-with-new-item.png "Image properties dialogue")

4. **Adjust widget display settings**

- After inserting the image, you can adjust how it appears on the page before you save the image properties.
- You can, for example, display the image as _Large_ to make it less limited in height.

  > **Info:** The available options depend on your project's configuration, so the options in your project may differ from our example.

5. **Save your changes**

- **Apply** the changes you just made, and **Save** the page to **Preview** your updates.
- If you're happy with the newly created image, return to the **Page Builder** view and **Publish** the new version of the _Premier credit card_ page.

The page should look something like the following image:

![Premier credit card page with new image](https://docs.kentico.com/docsassets/modules/exercise-2-add-an-image-to-image-widget/premier-credit-card-with-new-product-image.png "Premier credit card page with new image")

## Exercise 3: Try smart upload in a rich text widget

You already saw how the _smart drag-and-drop asset upload_ functionality speeds up your editing process in the previous exercise. Let's try smart upload while editing rich text content. You can easily insert images into the rich text without leaving the _Page Builder_, or switching to the _Content hub_ first.

1. **Open a Rich text widget for editing**
   - Stay on the _Premier credit card_ page, and add a new **Rich text** widget below the _FAQ_ widget.

2. **Drag and drop an image into the rich text widget**
   - Drag an image file from your computer and drop it directly into the rich text editor.
   - Xperience uploads the image and automatically creates a new reusable asset in the _Content hub_.
   - Choose **Workspace**: _Kbank Global Media Assets_.
   - Leave **Location**: _Uncategorized (no folder)_.
   - Create the new content item using the **Upload** button.
   - You can now style your rich text field, including the image.

3. **Preview the asset and publish the changes**
   - **Apply** the changes you just made, and **Save** the page to **Preview** your updates.
   - If you’re happy with the newly created image, return to the **Page Builder** view and **Publish** the latest version of the Premier credit card page.

### See where your images are used before making any changes

Before you edit or remove an image, take a moment to review the impact of your changes with the _Content Reuse Locator_. You’ll find [this tool](https://www.kentico.com/discover/blog/content-reuse-locator) in the **Used in** [tab](https://docs.kentico.com/documentation/business-users/website-content.md#used-in) of the asset details within _Content hub_. The _Used in_ tab shows every page or content item that references the image. You can confidently update or change the image while knowing how your changes affect other content.

![See where your image is used before making any changes](https://docs.kentico.com/docsassets/modules/exercise-2-add-an-image-to-image-widget/content_reuse_locator_use_in_tab_on_image.png "See where your image is used before making any changes")