Bynder Integration for DXM

[ptylr]

Originally appeared on Crownpeak's Github repository.

Bynder's digital asset management solution improves your digital asset flow from creation to approval, to deliver consistent content across all of your channels.

This integration allows a DXM content author to use a Draggable-Component, populated by Bynder, to be used within a DXM-generated experience.

Capabilities

The Bynder Integration for DXM allows content authors to use a Bynder "aware" Component to enhance their digital experience.

Upon click of the image, you will need to login to your Bynder account.

You will now be able to use Bynder's Compact View modal overlay to search for and select an image.

Selecting an image and clicking "Add Media" will add the content to the DXM interface. Click the image to re-select from the Bynder Compact View.

You can now save the Asset as normal and the image will be persisted on the Asset.

Configuration Steps

Within your Project, create a new component called "Bynder Image" and set the following pattern:

<img src="" alt="Select Bynder image" style="visibility: hidden" data-cp-integration="bynder" />
<div style="display: none">{image : Text} {image_alt : Text}</div>

Edit the generated Components_BynderImage.cs, inside the ComponentOutput function (before the return) add:

if (context.IsPublishing)
{
    // TODO: change this if you modify the component markup
    ComponentMarkup = @"<img src=""{image : Text}"" alt=""{image_alt : Text}"" />";
}

Upload bynder-integration.js from this repository into a suitable folder. No workflow will be required, as it doesn't need to be published. 

In each applicable output.aspx using Drag-and-Drop, above the first Out.ShowDragDrop line, paste (in ASPX context):

if (!context.IsPublishing) {
    // TODO: change path below to match the location of your bynder-integration.js
    Out.WriteLine("<script src=\"" + Asset.Load(Asset.GetSiteRoot(asset).AssetPath + "/_Assets/js/bynder-integration.js").GetLink(LinkType.Include) + "\"></script>");
}