Manage files in Xperience

Managing your project’s files doesn’t have to be a complicated chore. In Xperience by Kentico, you can keep all your important assets in one place, making it easier to find and update them. They can also be reused whenever you need. In Xperience, you can store various file types, including images, videos, PDFs, presentations, documents, and more. All assets are stored within the Content hub, your central repository for reusable marketing content.

The assets in the Content hub are based on a custom content type. Depending on your project implementation, you’ll be working with Images, Media, or Assets. For example, in the Kbank demo site, you’ll work with the Asset content type.

We’ll show you the basics so you can easily store and manage your assets, and make your everyday marketing tasks a lot easier.

Work with assets in Content hub

Storing files in Content hub means you can reuse them in different digital marketing activities across your marketing channels. Assets in the Content hub provide you with helpful features that make managing large projects a breeze.

You can preview all content items with images (in Kbank based on the Asset content type) and switch between view modes to suit your current workflow.

If you need to add multiple files to the Content hub at once, use the Upload files button.

You can also upload an image directly from a widget while editing a page.

When you upload an image (whether through the Content hub or a widget), Xperience can automatically create image variants for different devices and applies taxonomy tags to help categorize the images.

The automatic taxonomy tags are generated using Azure AI services, which means results can vary. The same image may receive slightly different tags at different times, as the process is not standardized. You can, however, review and edit these tags as needed.

To ensure no unapproved data is published live, you can apply different content management workflows. You can also fully control who on your team uses the assets and how they use them through workspaces.

You can also create asset variants for different languages to ensure that your visitors receive properly localized content, and use taxonomies to categorize your images accordingly.

Xperience also provides an out-of-the-box method to restrict access to a file, meaning only logged-in visitors can view or access it.

Exercise 1: Upload and manage multiple images in Content hub

Imagine that you’re running a flash promotional push to promote a new product – Family Savings Account. The promo push will involve a whole batch of images, but uploading them one by one would be slow and a bit frustrating.

That’s why Content hub allows you to upload and prepare multiple images at the same time. With some help from AIRA, you’ll also ad the correct tags, and automatically generate image variants in different sizes. By the end, you’ll have a clean, well-organized folder of assets ready to be used across your promo push.

1. Download and prepare your images

   1. Download the sample images ZIP from the course resources and extract it to a local folder on your device.
   2. Review the file names and remove duplicates if necessary to keep the library clean.

2. Open Content hub and choose your target folder

   1. In Xperience, go to Content management and open Content hub.
      
   2. Ensure you are working in the Personal Banking workspace.
   3. Navigate the Folders tab and locate or create the folder where your campaign images should live.
      
   4. Let’s also create a subfolder like Family Savings Campaign to keep assets easy to find later.

3. Start a bulk upload

   1. Next to the New content item button, use the arrow to open dropdown menu and select Upload files.
   2. Select the files you want to upload from your source folder in the upload dialog.
      
   3. Use Open to confirm selected files and begin the upload.
   4. Once the files are successfully uploaded, you can Close the upload dialog.
   5. The Assets are now in the Draft (Initial) status, and you can check them and make further adjustments before you publish the assets.

4. Check and adjust images

   1. Open the image with the original filename AdobeStock_445562436.jpeg and adjust:
      • Description: Image of a smiling woman with a credit card and laptop.
      • Alt text: Smiling woman holding a credit card, looking into an open laptop computer.
      • Click the Adjust image icon to update the image variant.
      • Primary Image changes to make:
        • Image format: Change from JPEG to JPG.
        • Quality: adjust the quality to Medium 80%
   2. Save the changes.
   3. Manually adjust the focal point of the Primary image.
   4. Check and adjust the crop in Image variants if needed.
   5. Save your latest updates.

5. Manually adjust predefined tags:

• Use the tag selector to add relevant tags from your project’s predefined list, such as Young people and Family setting.
• Save your changes to apply tags.
  

1. Inspect another image to verify results

   1. Open newly uploaded image.
      
   2. Confirm it has the expected tags and a clear description.
      
   3. Make minor edits if needed, then Save.

2. Final tidy-up and quality check

   1. Ensure all images reside in the correct folder with the proper naming and tags.
      
   2. Use Filters in the folder, for example, filter by Content type (Asset), or by Taxonomy tags you just applied (to confirm your tagging works as expected).
   3. If an image does not fit this campaign, move it to a more suitable folder, or make any last adjustments now.
      

3. Publish your assets

   1. Select all assets in the folder by checking off the Content item name checkbox, or one by one if you want to select only some.
   2. Publish all selected items in bulk.
   3. If unsure about the result, verify that the status of the selected assets has changed from Draft (Initial) to Published.

Nice work! You’ve just uploaded and organized a larger set of images in one smooth process. By using bulk upload, AIRA-assisted tagging and adding alt description, and creating manually updated variants, you’ve built a tidy, reusable library that will save you and your team time later.

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:

Image AI features

Xperience AIRA provides additional features when it comes to images stored in the Content hub. It can automatically adjust images when you upload them by, for example, automatically selecting the image focal point and creating different image variants for desktops and mobile devices. This ensures your audience sees the best version of your image, no matter their device.

If you want more control over how the final image looks, you can manually adjust the focal point to crop the image appropriately before saving the new content item.

You can test this for yourself and instantly see how changing the focal point also adjusts the cropped variants of the image to be in line with the newly selected focal point.

Learn more about how AIRA processes and adjusts your images to improve performance and visual quality.

Media libraries sunset

In previous versions of Kentico, media libraries stored file types such as images, videos, and audio files for use on websites. While they worked similarly to assets in the Content hub, they offered fewer customization options, only had a predefined set of fields, and could not be secured (meaning that anyone with the direct file URL could access them).

For all of the above reasons, the clear way forward is to organize, optimize, and safeguard your assets in the Content hub.

Wrap up

By now, you’ve seen how Xperience helps you keep files organized and easy to reuse. You also practiced uploading and working with image assets directly from a widget. These skills make it easier to handle your daily tasks with less manual effort and much faster than before.

Use Content hub to:

• Store and reuse assets across different channels.
  
• Upload files directly in the Content hub or from within an image widget.
• Use multi-file upload to speed up and simplify your asset management.
• Benefit from automatic image variants and taxonomy tags.
  
• Use AIRA to process and optimize images for better performance automatically.
  
• Add and configure images in widgets to control how they display on your site and on different devices.
  
• Improve working with assets when compared to Media libraries.

Next step

You’ve now learned the basics of managing your files in Xperience. You’re in a great position to take a deep dive look at how working with image variants and focal point can make your daily image-related chores a walk in the park.

If you’re curious about content management, you can also learn more about how developers define the content type assets and retrieve their content to the website.