The CMS Browser is a tool to help integrate Third Light IMS with your CMS or web management application. It enables web developers and integrators to place a "Fetch Image From IMS" button into a CMS, mailing list manager or other web tool. Using the button, a user working in your CMS can select a file from your Intelligent Media Server and embed a URL into the web or mail page they are editing so that the file will play or display when the page is opened - without the user having to exit the CMS. As well as embedding published files, you can also edit and crop them to suit the purpose, before embedding the link.
The CMS Browser is available from IMS v6.0.18 onwards.
Example usage
A simple example of how the CMS browser can be used is included in your Third Light IMS site - visit http://your-ims-site/cmsbrowser.tlx
To insert the CMS browser into another site, you can use the following example code:
<script type="text/javascript" src="http://your-ims-site/angular/IMS.IframeApp.js"></script>
<script type="text/javascript" src="http://your-ims-site/angular/IMS.IframeAppOverlay.js"></script>
<script type="text/javascript">
function launchCMSBrowser(){
var app = new IMS.IframeAppOverlay("http://your-ims-site/apps/cmsbrowser/", {
width: '99%',
height: '99%',
options: {
theme: "light",
metadata: true,
revisions: true,
cropClasses: [
{
key: "pic",
name: "Landscape",
width: 450,
height: 330
},
{
key: "wide",
name: "Wide",
width: 400,
height: 200
}
],
provideSFFUrl:true
}
});
app.on("cropChosen", function(cropDetails) {
var url = cropDetails.urlDetails.url;
var image = document.createElement("img");
image.src = url;
image.width = cropDetails.urlDetails.width;
image.height = cropDetails.urlDetails.height;
document.getElementById('results').innerHTML = "";
document.getElementById('results').appendChild(image);
});
}
</script>
<button onclick="launchCMSBrowser()">Fetch Image From IMS</button>
<img id="results" style="display:none"/>
Using the selection
When setting up the CMS browser object, you can add callbacks that are fired when a file has been chosen. This is done using app.on("cropChosen", myFunc);
The cropChosen event has associated details of the file selected. The callback function is passed an object containing keys as follows:
Key |
Description |
|---|---|
id |
The IMS File reference of the selected image |
originalWidth |
The width in pixels of the selected image |
originalHeight |
The height in pixels of the selected image |
fileRevision |
The version number of the selected image |
cropDefinition |
A hash of details describing the selected crop area |
cropClass |
The key of the crop class selected (as provided to |
urlDetails |
A hash containing details of the URL to the selected file (only present when |
metadata |
A hash of metadata for the selected file |
