Skip to content

Instantly share code, notes, and snippets.

@JohnRSim
Created June 28, 2023 13:29
Show Gist options
  • Save JohnRSim/95e2c1436697504396705d2d656fe5b6 to your computer and use it in GitHub Desktop.
Save JohnRSim/95e2c1436697504396705d2d656fe5b6 to your computer and use it in GitHub Desktop.
Quick sample of using OCM Content SDK to load in images
	import { createDeliveryClient } from '@oracle/content-management-sdk';
	
	//setup ocm server options
	const serverconfig = {
	  contentServer: SERVER_URL,
	  contentVersion: API_VERSION,
	  channelToken: CHANNEL_TOKEN,
	};
	
	//initiate OCM Client SDK
	const clientInstance = createDeliveryClient(serverconfig);
	
	/**
	 * displayOCMImages
	 * loop through all img elements that have data-ocm attribute and replace transparent 1px b64 gif src with image url from OCM
	 */
	function displayOCMImages() {
	  const img_els = document.querySelector('img[data-ocm]');
	
	  //loop
	  img_els.forEach((el) => {
		//get id from att val
		const id = el.getAttribute('data-ocm');
		
		//generate asset url
		const imgURL = clientInstance.getRenditionURL({
		  id: id,
		  type: 'Thumbnail',
		  format: 'jpg'
		});

		//update
		el.src = imgURL;
	  });
	}
	
	//init
	displayOCMImages();
<img data-ocm="CONT12345678" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment