Add the Content Browser to your Orange Logic environment
There are two ways to add the content browser to your Orange Logic environment:
- Download the content browser and install it in your Orange Logic environment.
- Access the content browser via Orange Logic’s CDN.
After you add the content browser to your environment, you must activate IIIF in your Orange Logic environment. This allows users to view images.
Download and install the content browser
Content browser versions are separate from Orange Logic releases.
- Download the most recent content browser version that works with the Orange Logic release your organization uses.
- Open the files while you’re signed in to Orange Logic to install the content browser on your Orange Logic environment.
Note
When you click the links to download the content browser, they might open in your browser instead of downloading to your computer. If this happens, you can download the file by pressing Cmd + S (Mac) or Ctrl + S (Windows) to save each file to your computer.
Activate IIIF in your Orange Logic environment
Orange Logic’s content browser displays images following International Image Interoperability Framework (IIIF) standards. These standards allow images shared with IIIF to be opened with image viewers. To use the content browser, you or an administrator must activate IIIF support in your organization’s Orange Logic environment and choose which folders and images should be available in image viewers. Orange Logic users with a Link account can go to the IIIF support article to learn more.
Security Function
You must add the Can use IIIF API Security Function to the Everyone Group. This allows anyone to view images shared with IIIF in the content browser and other image viewers.
Add the Content Browser SDK to a project from Orange Logic's CDN
You can add the content browser to projects created with HTML, JavaScript, React, and more.
Follow these steps to access the content browser via Orange Logic’s Content Delivery Network (CDN) in a webpage.
- Paste the following HTML into your webpage.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <script src="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.0/OrangeDAMContentBrowserSDK.min.js"></script> <link rel="stylesheet" type="text/css" href="https://downloads.orangelogic.com/ContentBrowserSDK/v2.1.0/OrangeDAMContentBrowserSDK.min.css"> </head> <body> <div style="display:flex; flex-direction: column; gap: 0.5em;" id="app"> <span>containerId: "react-app-root". </span> <div style="display:flex; gap: 0.5em;"> <span>Try OrangeDAMContentBrowser.help() in the console or click this button</span> <button style="width: 250px; height:20px;" onclick="myFunction()">Load the content browser</button> </div> <div id="react-app-root" style="width: 800px; height:800px; border: 2px solid black;"></div> </div> <script> function myFunction() { // this function opens the asset link in a new tab OrangeDAMContentBrowser.open({ onAssetSelected: (assets) => { window.open(assets[0].imageUrl, '_blank'); }, onError: (errorMessage, error) => { }, containerId: 'react-app-root', baseUrl: "<your-organization's-Orange-Logic-URL>" }); } </script> </body> </html> - (Optional) In the line beginning with
baseUrl, replace<your-organization's-Orange-Logic-URL>with your organization’s base Orange Logic URL. For example,https://mangovations.orangelogic.com/. - To confirm the CDN loaded, call
OrangeDAMContentBrowser.help()in the web console. This returns:
/* Orange DAM Content Browser SDK Example */
window.OrangeDAMContentBrowser.open({
onAssetSelected: (assets) => {
// Callback function triggered when assets are selected
console.log(assets);
window.open(assets[0]?.imageUrl, '_blank');
},
onError: (errorMessage, error) => {
// Callback function triggered when an error occurs
console.error(errorMessage, error);
},
onClose: () => {
// Callback function triggered when the asset browser is closed
window.alert('The content browser is closing.');
},
containerId: "", // ID of the container to attach the picker; opens in a popup if blank
extraFields: ['coreField.OriginalFileName', 'document.CortexPath'], // Additional fields to retrieve from the assets
baseUrl: "", // Default base URL to pre-fill in the asset browser
displayInfo: {
title: true, // Whether to display the asset title
dimension: true, // Whether to display the asset dimensions
fileSize: false, // Whether to display the file size
tags: false, // Whether to display the asset tags
},
publicApplicationName: "", // Public name of the DAM to display on the login screen
pluginName: "OrangeDAM Content Browser", // Name of the plugin to display on the login screen
ctaText: "Insert", // Text to display on the insert button
persistMode: true, // Whether the browser remains open after selecting an asset
availableDocTypes: ['Images', 'Videos', 'Audio', 'Others'], // Array of available asset types to filter assets
availableRepresentativeSubtypes: ['Other'], // Array of supported subtypes for representative images
showCollections: true, // Whether to show Collections V2 (Beta) in the content browser
lastLocationMode: true, // Whether to open the last selected folder on load
allowTracking: true, // Whether to activate tracking parameters for asset URLs
});
Note
If you need help, submit a support request and include this ID in the description: 2P7YOH54ET5O.
IIIF URL structure to retrieve images
Orange Logic supports IIIF Image API 3.0 standards, so by default you can use the following syntax to retrieve an image:
[SITE_URL]/IIIF3/Image/[Identifier]/[Region]/[Size]/[Rotation]/[Quality].[Format]
where [Identifier] is the selected asset’s Orange Logic RecordID. This is the encrypted version of the SystemID.
Orange Logic users with a Link account can go to the IIIF support article for more information.
Updated 19 days ago