Use image assets in web applications

For marketers

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

Before you begin

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 Content user interface. See Product documentation.
Information about obtaining URL. See Accessing published assets by their path.
Information about using the Content developer tool, you can download and install from GitHub.

Upload the image assets

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

Click Upload assets from Content > My Content.
Select the image file that contains the image that you would like to upload.
Verify that the image is uploaded.
After the asset successfully uploads, our AI analyzes the image for concepts and faces. As you can see in the previous screen capture, AI 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.
Click the API Information icon on the asset form.
Copy the Delivery URL for this asset. This Delivery URL is where this asset is published on the Content CDN, which you can then use in image tags in your HTML based web application.

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://**content-XX-N**.content-cms.com/**tenant-id**/**asset-path**.
The first part of the URL is the hostname specific to your subscription. The second component is the ID that is associated with your Content 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 host and subscription ID.
https://content-us-11.content-cms.com/00000000-1111-2222-3333-444444444444/dxdam/53/534b8332-fa6f-461f-b996-3079742fb207/BulkUpload.png

After you have that URL

Try the URL in the browser's address bar to see it load the image asset directly.
Try the URL in an tag in a simple local HTML page to verify it loads.
Replace the 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://content-us-11.content-cms.com/00000000-1111-2222-3333-444444444444/dxdam/ab/ab21158d-0d92-4275-a93d-26404174d5c6/BulkUpload.png">.
Your web application will load that image asset from Content!

Alternative option for developers

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

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.
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.
Append those /dxdam/... paths to your http://tenant-host/tenant-id based URL.

Expected outcome

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