Crownpeak Employee
Crownpeak Employee

Bynder Integration for DXM

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.

Bynder Integration Video


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

Bynder Component

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

Bynder Login

Bynder Login

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

Bynder Compact View

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.

Bynder Asset in Situ

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>

Create Component

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}"" />";

Component Output Amends

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

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>");

Template Amends

Labels (1)

Have an idea

Have an idea to improve DXM?

Let us know !

Submit an idea

Can't find what you are looking for?

Find Answers

Search our DXM Forum to find answers to questions asked by other DXM users.

Ask a Question

No luck? Ask a question. Our Product and Support teams are monitoring the Forum and typically respond within 48 hours.

Ask a Question