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.

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.

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.

   

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.

  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:

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 in the Used in tab 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.