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