Overview

Skill Level: Any

One use case for IBM Watson Content Hub involves managing image assets in the hub and then leveraging the published versions of those assets directly from the Watson Content Hub content delivery network (CDN). This tutorial describes the steps that are involved in storing the assets in the hub for your tenant, and then obtaining and using the published image assets URLs in a web application.

Prerequisites

 To get started, you need:

  • Mockup of a portion of your website, with local collocated html, css, and images provided by your coworker.
  • Information about using the Watson Content Hub user interface. See Product documentation.
  • Information about obtaining URL. See Accessing published assets by their path.
  • Information about using the WCH developer tool, you can download and install from¬† GitHub.

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Uploading the Image Assets

    For the purposes of this tutorial, we’ll stick to a single asset, the image of Watson Content Hub shown inside the CSS styled laptop border.

    1. Click Upload assets on the All content and assets page.

      UploadAssets

    2. Select the image file that contains the image that you would like to upload.
    3. Verify that the image is uploaded and results in a screen like the following                                               
      Click To Open Asset

    After the asset successfully uploads, Watson analyzes the image for concepts and faces. As you can see in the previous screen capture, Watson recognized that this asset is related to “web site”, “computer”, “machine”, “device” and “portal site”. If you feel that a particular tag does not match your intent for the image, click the X on the tag to remove it.

    1. Click the Open asset link on the right side of the page, below Done.
    2. The asset details page opens and shows you details about this asset.
    3. On the right side of the page, on the Information tab click the i icon to open the API Information dialog as shown in the screen capture.
    4. Copy the Delivery URL for this asset. This Delivery URL is where this asset is published on the Watson Content Hub CDN, which you can then use in image tags in your HTML based web application.

  2. Obtaining the published asset URL syntax

    The developer center documentation includes a section on “Accessing published assets by their path“. For the purposes of this tutorial, we’re walking you through the steps to obtain the URL with the following format:

    https://my#.digitalexperience.ibm.com/tenant-id/asset-path

    The first part of the URL is the host name specific to your tenant. The second component is the tenant ID that is associated with your Watson Content Hub account and the remainder of the URL is the asset path that is associated with that asset ID.

    For example, the URL will look like the following, but will contain your tenant host and tenant ID.

    https://my11.digitalexperience.ibm.com/00000000-1111-2222-3333-444444444444/dxdam/53/534b8332-fa6f-461f-b996-3079742fb207/BulkUpload.png

    After you have that URL

    1. Try the URL in the browser’s address bar to see it load the image asset directly.
    2. Try the URL in an <img> tag in a simple local HTML page to verify it loads.
    3. Replace the <img> or CSS URL in your original HTML page with the published delivery asset URL.

      For example, replace your original <img src=”BulkUpload.png”> from the local copy of the html to

    <img src=”https://my11.digitalexperience.ibm.com/00000000-1111-2222-3333-444444444444/dxdam/ab/ab21158d-0d92-4275-a93d-26404174d5c6/BulkUpload.png”>.

     

    Your web application will load that image asset from Watson Content Hub!

  3. Alternative option for Developers

    For Developers who use the Node-based wchtools from Git Hub to push and pull managed content assets (images) to Watson Content Hub, here’s an alternative to finding the asset path portion of the published URL:

    1. Assets that are created with wchtools (not uploaded through the Authoring UI), might set the path directly. For example, pushing from working-dir/assets/dxdam/my/path/to/my/image.png results in an asset path /dxdam/my/path/to/my/image.png.
    2. Download the assets that are created with the Authoring UI with wchtools to view the unique generated asset paths in the local file system under the working directory. For example, pull the asset to working-dir. Then, look under assets/ subfolder for /dxdam/… paths.
    3. Append those /dxdam/… paths to your http://tenant-host/tenant-id based URL.

     

Expected outcome

After you upload the images to Watson Content Hub and then replace the references to those images in the HTML page with URLs to the published image assets

WCHAssetImages

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Join The Discussion

Your email address will not be published. Required fields are marked *