Integrations

Add the Generic Asset Browser to your project

Use HTML to add the Generic Asset Browser to your project

You can add the Generic Asset Browser to projects created with HTML, JavaScript, React, and more. These instructions explain how to install the Generic Asset Browser with HTML. Go to the example section for examples created with JavaScript and React.

Follow these steps to access the Asset Browser plugin via a Cloud Delivery Network (CDN) in a webpage.

  1. 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/Cortex/4SQPK-AssetBrowser/v{Generic-Asset-Browser-Version-Number}/OrangeDamAssetBrowser.min.js"></script>
  <link rel="stylesheet" type="text/css¨"
    href="https://downloads.orangelogic.com/Cortex/4SQPK-AssetBrowser/v{Generic-Asset-Browser-Version-Number}/OrangeDamAssetBrowser.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 CortexAssetPicker.help() in the console or click this button</span>
      <button style="width: 250px; height:20px;" onclick="myFunction()">Load the Generic Asset Browser</button>
    </div>
    <div id="react-app-root" style="width: 800px; height:800px; border: 2px solid black;"></div>
  </div>
  <script>
    function myFunction() {
      CortexAssetPicker.open({
        onImageSelected: function (assets) {
          console.log(assets);
        },
        onError: function (error) {
          console.log(error);
        },
        containerId: "react-app-root",
        baseUrl: "<your-organization's-Orange-Logic-URL>",
      });
    }
  </script>
</body>
</html>

  2. 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/.

  3. In the line beginning with <script, replace {Generic-Asset-Browser-Version-Number} with the version number of the latest release.

  4. In the line beginning with <link, replace {Generic-Asset-Browser-Version-Number} with the version number of the latest release.

  5. To confirm the CDN loaded, call CortexAssetPicker.help() in the web console. This will return: 

    
/* Cortex Asset Picker Help */ 
window.CortexAssetPicker.open({
onImageSelected: (images) => { 
// Do something with image console.log(images); 
},
onError: (errorMessage, error) => { 
// Do something with error
},
multiSelect: true, // single or multiple file picker
containerId: "react-app-root", // container element to attach, leave blank to open popup
extraFields: ["coreField.OriginalFileName", "document.CortexPath"], // extra asset fields to get
baseUrl: "<your-organization's-Orange-Logic-URL>", // default base URL to pre-filled;
onlyIIIFPrefix: true, // default is false will get full IIIF standard file link
displayInfo: { title: true, dimension: true, fileSize: true, tags: true,}
});

Configure the Generic Asset Browser

You can customize the Generic Asset Browser to fit your use case:

Customize the Generic Asset Browser on your own

Open the Generic Asset Browser with the following function:

window.CortexAssetPicker.open(image) => {
  console.log(image)
}

Then, pass configurations to the Generic Asset Browser and control its behavior by adjusting these attributes:

AttributeDescriptionRequiredDefault valuePossible values
multiSelectWhen true, users can select more than one asset at a time.nofalsetrue, false
containerIdThe container ID that the Generic Asset Browser attaches to. If undefined, the Generic Asset Browser appears as a popup.nonullstring
baseUrlIf specified, the Generic Asset Browser prefills the base URL as the specified value. Otherwise, the URL on the login page will be empty.nonullURL string
onlyIIIFPrefixIIIF links have this format:
{scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

When false, the link of an IIIF image is the full URL, for example:
{scheme}://{your-Orange-Logic-server}/IIIF3/Image/2Y1XC5O9J67/full/max/0.0/default.jpg

When true, the link of an IIIF image is shortened to the URL before the {region}, for example:
{scheme}://{your-Orange-Logic-server}/IIIF3/Image/2Y1XC5O9J67		nofalsetrue, false
displayInfoSpecifies whether the Image Asset card displays information for these fields: title, dimension, fileSize, and tags.

Use true to show a field and false to hide it.		no{ title: true, dimension: true, fileSize: true, tags: true, }ImageCardDisplayInfo { title: <true, false>, dimension: <true, false>, fileSize: <true, false>, tags: <true, false>, }
onImageSelectedThe information returned when one or more images is selected.

This takes a callback function, and once the user selects assets, this information is returned:
ImageLink: The asset’s link
Metadata: Select metadata for each asset, configured in the server that has the assets. Orange Logic configures this metadata for you.
ExtraFields: Fields requested by the user		yesnull(image) => { console.log(image) }
onErrorThe callback when an error occurs. The end user will have access to the Error message and the Error object.nonull(errorMessage, error) => { console.log(errorMessage) }
extraFieldsEnd users can request extra Orange Logic metadata fields via this attribute.
Use Orange Logic API names separated by commas.		nonullFor example: ["CoreField.OriginalFileName",”CoreField.CortexPath"]

Customizations Orange Logic can make

Submit a support request to do any of the following:

  • Limit asset availability based on visibility class. For example, Orange Logic can configure the Generic Asset Browser to display only images with the Visibility Class “Public.”
  • Change the structure of asset URLs. For example, you could use IIIF image adjustments. Go to the [IIIF structure]((ref:add-the-generic-asset-browser-to-your-project#iiif) for the default structure.
  • Configure the returned metadata. You can choose which metadata is returned with the Metadata sub-field of the attribute OnImageSelected.
  • Change the returned asset format. You can choose which proxy formats are available to your users. Then, they can choose the format they want when they select an asset.

ℹ️

Note

In v1.0.0 of the Generic Asset Browser, users cannot select the proxy to use. Instead, users access the large proxy format unless you choose another proxy format as the default.

IIIF structure

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.

Go to the IIIF support article for more information.

Use the Generic Asset Browser with other APIs

The Generic Asset Browser can return the Orange Logic SystemID or RecordID of selected assets. Then, you can use these identifiers with Orange Logic’s APIs and tools to do even more with those assets. For example, you could update the selected asset’s metadata within Orange Logic to reflect how it is used in the external application.

Generic Asset Browser examples

The Generic Asset Browser is extremely flexible. Use these examples as inspiration.

Orange Logic’s demo page

You can try the Generic Asset Browser for yourself on our demo page.

ℹ️

Note

The demo will only work if your organization has activated the Generic Asset Browser on your Orange Logic site.

JavaScript

In this example, the extraField attribute is specified as ["CoreField.alternative-description"] and onImageSelected is specified as:

function (assets) {
          console.log(assets);
          document.getElementById("myImage").src=assets[0].imageUrl;
          document.getElementById("myImage").alt=assets[0].extraFields['CoreField.alternative-description'];
        }

Therefore, the selected image’s alternative description is displayed when a user hovers over it.

React

Sanity.io is a CMS that stores and pushes content to digital platforms. Orange Logic’s Sanity.io integration retrieves images from Orange Logic and adds them to Sanity. It’s a great example of using Orange Logic’s Generic Asset Browser in an integration.

Updated 11 days ago