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, 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.
   • 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: