As part of our work with BAFTA we were tasked with creating a module that would integrate their new Drupal site with the Third Light digital asset management platform. Here's the what, the why and how!
What is Digital Asset Management?
Digital asset management refers to the rules and processes an organisation puts in place to manage, retrieve and distribute their digitalmedia, such as photos, videos, PDFs, presentations and documents. DAM is not to be confused with the software of the same name.
Why did BAFTA need Digital Asset Management and Third Light?
BAFTA has a lot of rich imagery and needs to manage this image and associated metadata across multiple locations. They also need to ensure all images are uploaded to the site in the correct sizes, with all relevant titles and copyright information.
The Third Light digital asset management platform has a lot of functionality that deals with image formats, especially around resizing and metadata - making it an ideal choice for BAFTA's content management requirements.
An added benefit of using this platform is that all images are hosted on a high availability cloud based platform which means they essentially have a CDN platform for the imagery on the site.
Integrating Third Light with a Content Management System (CMS)
The best way to integrate Third Light with a CMS is to use the Third Light Browser, which is available on the Third Light IMS platform from v6.0. This browser is a JavaScript widget that can configured to display and return data about images in Third Light in different ways. The browser allows users to select the image they want, crop it into a specified set of dimensions and then import the image into the site. The imported data is essentially a returned JSON string so any integration module just needs to capture and translate this string and store it within the system.
Third Light already provide a Drupal module in the form of a CKEditor module plugin, but due to a couple of factors we weren't going to use that module and as such we needed a different approach. Our module of choice for text editor integration in Drupal is the WYSIWYG module, which we commonly pair with CKEditor, so we needed a module to cover that integration. On top of this we also wanted to be able to store the Third Light data as a field on certain content types and so we needed a separate module in order to provide this functionality.
Third Light Integration Module
Rather than create two integration points for each module a single integration module was created. This creates an administration page that allows the Third Light Browser to be configured, with the integration URL being the most important as this is used to create the integration. It is possible to change the skin of the browser and to display all meta data along with the image within the Third Light Browser via a few options, so these options are also exposed here. The following image shows the Third Light integration module main settings page.
It is also possible to send a selection of image formats and sizes and so a small administration area was created to allow these sizes to be set up within this integration module.
Finally, a test page was created that allows users to open the Third Light Browser with the currently configured settings and insert an image into an image tag. This was helpful in ensuring the integration works and that the configuration settings work as expected. It also has a few fields so that the metadata that gets returned can be viewed. The following image shows the Third Light browser in use within the Drupal site.
Once this module was complete we had a starting point to create the other two integration points, and could do so without having to rewrite all of the boilerplate code that creates the integration details.
Third Light WYSIWYG Module
With the integration module in place the first module to build upon that was the Third Light WYSIWYG integration module. As we are only using CKEditor on the site it only made sense to integrate with this single editor. It shouldn't be too much trouble to integrate other editors, but this isn't something we were concentrating on here.
The CKEditor integration adds a single button to the WYSIWYG interface that opens up the Third Light Browser when activated. The selected image is dropped into the current location in the CKEditor window as an image tag, with the alt text being generated from data returned from Third Light. The reason a standard image tag is used here is in order to allow the image to be altered afterwards via other CKEditor buttons. Once the image has been selected then it is dropped into the content just like any other image selected via the CKEditor image interface. The following module shows the Third Light Browser button within the CKEditor menu and an inserted image within the body copy.
Third Light Field Module
BAFTA also wanted the ability to create galleries of images based on imagery taken from Third Light. As a result, instead of doing this through the WYSIWYG editor, a Third Light field was created that would store the images as string data within the Drupal fields. When added to the Gallery content type, the Third Light field is given a 'Browse' button, which opens up the Third Light Browser in the same way as the WYSIWYG integration does. Once the image is selected the URL and other metadata is added to the text fields present. The following image shows the Third Light field with an image selected.
Overall the Third Light Browser API was easy to use - and we working to improve the software though our experience of integrating with Drupal.
BAFTA have been extremely happy with the work done on the integration and we are hoping to release some of the modules talked about here to the Drupal community soon.
