OCM Approaches to Displaying Images

Here is a run through and some examples and items to think about when loading images from Oracle Content Management headless or from within sites builder.

Topics

  • 1) Using The OCM Content SDK
  • 2) Calling REST API Directly
  • 3) CDN (Akamai) and image Cache Busting Best practices

1) Using The OCM Content SDK

OCM comes with a nice Javascript SDK to make integration and using it's services faster than writing it from the ground up - called the Content SDK.

Getting Setup

Depending on your setup there are a number of ways you can install the SDK

Available ContentSDK Methods

Content SDK - Class: ContentDeliveryClient

Generating an image URL from an ID

As we are just interested in generating the image URL  

- we can use the "getRenditionURL" method :
https://docs.oracle.com/en/cloud/paas/content-cloud/sdk-content-delivery/ContentDeliveryClient.html#ContentDeliveryClient#getRenditionURL

Examples

If I have the content ID/slug I can then quickly generate the URL for the native image or pass across additional params like the rendition and format that I want to display.

Sample

Here is a quick example of connecting to the SDK and updating an img src with an OCM Image Asset using just the ID.

2) Calling REST API Directly

Let's improve on this but instead of using the SDK - we will make a fetch call to the published digital asset image to return it's renditions and generate a source set with the picture tag for a flexible display.

To make this easier I'm going to grab some code from one of OCM existing samples:

oce-svelte-gallery-sample/src/scripts/services.js at main · oracle-samples/oce-svelte-gallery-sample
Sample image gallery built using Svelte/Sapper and images from Oracle Content Management - oce-svelte-gallery-sample/src/scripts/services.js at main · oracle-samples/oce-svelte-gallery-sample

Which will generate the srcset and return all the rendition data that I need:

And then we can use the following injectImage method I quickly pulled together to parse the asset rendition data and inject picture tag into the page:

3) CDN (Akamai) and image Cache Busting Best practices

The final and most important step CDN and cache busting - especially if you are updating your images on a regular basis.
Oracle use Akamai behind the scenes for CDN access but you need to raise a Support Request to get this hooked up -

Administering Oracle Content Management
You can set up vanity domains to make it easier for users to access sites created with Oracle Content Management or Oracle Content Management itself.

Configure CDN

Setting up your CDN is important for two reasons - performance and lowering the cost of OCM - making users hit your CDN and cached asset instead of repeatable downloading of the same assets direct from OCM.

Make sure you think about you cache timeout - by default I think oracle set this as 15days but if you implement cache busting why not set the CDN cache to 1year!

Implement OCM Cache Busting

It's very easy with OCM as each asset has the updated date as part of the meta information using this and appending it onto the url of the image will clear the cache and update the image from the CDN.

Sample

Here I have added cb method to return the cachebuster value and then appending it to the image URL which will clear cache and display the latest version of the image from the CDN.

For a more in-depth guide into CacheBusting with OCM check out Dolfs Busting your caches blog post from the Oracle A-Team.

https://www.ateam-oracle.com/post/busting-your-caches