View the example cms.html page
An example of the Third Light Browser is included with every instance of Chorus.
To access the example, please browse to
The demonstration is fully-functional, and allows you to see the Third Light Browser, for example to test its features. The demonstration works by placing the image that the user selects into the boxed area labelled "Image goes here..."
- Open the Third Light Browser Demo page, at https://[yoursite]/cms.html.
2. Authenticate (if necessary) with chorus, and browse through the files and folders which are displayed according to your user credentials.
3. Select the image and follow the steps until you are happy with the cropping or size, then click 'Export'.
4. The image is now placed in the box that was previously labelled "Image goes here...".
5. You can adapt this demonstration to embed the image into an editor, form or other web content instead of placing the image into the box in the demonstration page. See "Example Usage", below, for an example of including the Third Light Browser into your application.
TIP: The URL to the image is also displayed, for your convenience, but normally you would just embed the image address directly into your page (in an IMG tag, for example). The Third Light Browser returns the image URL when the user clicks Export.
To insert the Third Light Browser into another site, you can use the following example code:
Using the selection
When setting up the Third Light Browser object, you can add callbacks that are fired when a file has been chosen. This is done using
cropChosen event has associated details of the file selected. The callback function is passed an object containing keys as follows:
The Third Light reference of the selected image
The width in pixels of the selected image
The height in pixels of the selected image
The version number of the selected image
A hash of details describing the selected crop area
The key of the crop class selected (as provided to
A hash containing details of the URL to the selected file (only present when
A hash of metadata for the selected file
Within these, subkeys are defined as follows
Width in pixels of the chosen output
Height in pixels of the chosen output
The x-coordinate of the top-left of the chosen crop area (in pixels)
The y-coordinate of the top-left of the chosen crop area (in pixels)
The width of the chosen crop area (in pixels, measured on the original file)
The height of the chosen crop area (in pixels, measured on the original file)
A URL to the output file
The width of the output file (in pixels)
The height of the output file (in pixels)
The Third Light Browser is usually launched via the
IMS.IframeAppOverlay. That wrapper takes arguments as follows:
The CMS browser supports options as follows:
Third Light Chorus URL to browse - defaults to the same as that passed to the
A string referring to the theme to load. Currently supported options are "light", "dark" and "blue"
An array of hashes defining the output formats to present
Boolean, whether to enable the display of metadata in the Third Light Browser (Off by default)
An optional array of metadata fields to include; defaults to all
An optional array of hashes, describing an order and content of metadata panels to display. Defaults to the Chorus configuration
Boolean, whether to display revisions other than the currently active one. (Off by default)
Boolean, whether to return a URL to the requested output file. Requires that the user has permission to publish files. (Off by default)
Boolean, whether to close the widget when the selection is made. Otherwise a final page is displayed containing pertinent details. (On be default)
An optional session ID to use (rather than prompting the user to log in, or using their existing session). This is useful in conjunction with server-side API-key session set up to allow auto-login
Boolean, whether to suppress the 'Close' button on the widget. (Off by default)
|Boolean, denoting whether to show thumbnails that are unsuitable for any of the available crop classes when browsing. (Off by default)|
|Boolean, denoting whether to show unsuitable crop classes in the crop class drop-down when cropping an image. (Off by default)|
|Integer denoting the closeness in relative pixels of a padded image to the crop border that will force a snapping of the image to that border. (30 by default, 0 will disable it)|
Defining Crop Classes
cropClasses key in the options hash contains an array of hashes. Each hash contains keys as follows
An identifier for the class. This must be unique across the array. It is not presented to the user, but is provided to the
A label for the class. This is the name displayed to the user of the CMS browser
The width (in pixels) for the class
The height (in pixels) for the class
The output format that you want the image to be ("JPG", "PNG", "GIF", "TIF", or "WEB"). "WEB" is a special choice that will maintain the current image type if it is a GIF, JPG or PNG, or else convert it to a PNG
|Denotes whether padding is allowed to exist around the image for this crop class|
metadata option is on, the Third Light Browser offers metadata to users. Without any further configuration, this displays the fields (and panels) configured. It is possible to use the
metadataFields option to restrict the list of metadata fields displayed. Using this approach, each field appears under the same panel as it would in Chorus, but only the listed fields are displayed.
When specified, this should be an array of Metadata key names, for example
Alternatively, you may specify the
metadataLayout option. This takes an array of hashes, describing the panels and fields to display - overriding panel layouts. This is formatted as follows:
You are here: