Integrating DAM (Bynder)

In this tutorial, you will learn how you can easily integrate Kentico Cloud with a Digital Asset Management (DAM) solution to get the most out of your media by providing content editors a custom image selector for the DAM platform of your choice.

Premium feature

Custom elements require a Professional plan or higher.

Table of contents

    This tutorial shows a specific example tailored to the Bynder platform, but the same principles can be applied to the integration with many more DAM solutions which either provide API to get a list of images or a native selector component that you can embed in your code.

    The Bynder image selector in action.

    What is Bynder?

    Bynder is a powerful DAM system which you can use to easily manage and categorize all your media. For more details, see the Bynder website.

    Bynder logo

    Content management + DAM

    While Kentico Cloud offers its own asset management, it's suited primarily for basic scenarios. The core of Kentico Cloud lies in efficient management of and collaboration over rich text content and structured content for omnichannel projects.

    For a large project with lots of media items, it is typically better to combine Kentico Cloud with a best-of-breed DAM solution.

    In this tutorial, we will extend an Article content type in Kentico Cloud with an image gallery powered by Bynder.

    Within this integration, you will:

    • Add a custom element with Bynder image selector to your content type
    • Assign images from Bynder to specific articles
    • Display the image gallery on the live site article page

    Step 1: Add a Bynder image selector to a Kentico Cloud content type

    In this step, we will extend the Article content type in our Sample App to include an image selector.

    1. In Kentico Cloud, choose Content models from the app menu.
    2. Open the Article content type.
    3. Add a Custom element.
      • Title – Image gallery
      • Hosted code URLhttps://kentico.github.io/custom-element-samples/Bynder/image-selector

    How the Article content type looks with a Bynder Custom element.

    How your Article content type might look when you've added an image gallery.

    Bynder provides a great component called Compact View that provides a complete UI for browsing and selecting images, including authentication with Bynder.

    Once you have a Bynder account, all you need to do is to log in when you want to use the image selector. That's why the custom element doesn't have any required extra parameters.

    Step 2: Assign images from Bynder to specific articles

    Now that you have extended the content type, you can assign individual assets from Bynder to image galleries in content items.

    1. In Kentico Cloud, choose Content & Assets from the app menu.
    2. Filter the list by content type to only the Article type.
    3. Open a content item for editing.
    4. Use the Bynder image selector to find and select images suitable for the particular article. Note that the first time you use the selector you will need to log in to your Bynder account.
    5. Repeat steps 3 and 4 for other Article items.

    The Bynder image selector in action.

    Selector value format and customization

    Note that the Bynder image selector used in the previous steps is a sample to demonstrate the possibilities. Feel free to adjust it to your needs and visual requirements or build your own.

    You can find the product selector source code in its GitHub repository.

    The compiled version used in the above example is in the Custom Element Samples repository.

    The selector stores the following value format in JSON, which it also uses to display the selected images on first load without the need to log in to a Bynder account:

    • JSON
    [ { "id": "AABE02D0-CD6D-4973-A5251B1C238A25CD", "previewUrl": "https://d2csxpduxe849s.cloudfront.net/media/final/e187906e-f579-4e10-800f-d01cb9ae5cda/webimage-5946F15F-3902-4F73-80EB4B83664960FB.png", "webUrl": "https://d2csxpduxe849s.cloudfront.net/media/final/e187906e-f579-4e10-800f-d01cb9ae5cda/webimage-5946F15F-3902-4F73-80EB4B83664960FB.png", "title": "which-brewing-fits-you-1080px" } ]
    [ { "id": "AABE02D0-CD6D-4973-A5251B1C238A25CD", "previewUrl": "https://d2csxpduxe849s.cloudfront.net/media/final/e187906e-f579-4e10-800f-d01cb9ae5cda/webimage-5946F15F-3902-4F73-80EB4B83664960FB.png", "webUrl": "https://d2csxpduxe849s.cloudfront.net/media/final/e187906e-f579-4e10-800f-d01cb9ae5cda/webimage-5946F15F-3902-4F73-80EB4B83664960FB.png", "title": "which-brewing-fits-you-1080px" } ]

    You can use any of those values for both the admin UI and your site. Should you need to extend the field set, you can do so simply by customizing the custom element code.

    Step 3: Presenting image gallery on the live site

    With new values in your data model and an understanding of their structure, you can start actually displaying a Bynder-powered image gallery below the article on your live site.

    This step varies based on the technology you're using to display your content, so let's just briefly summarize what needs to be done.

    First, update your front-end model for the Article content type to include the new custom element.

    Because the value from the selector is provided as a structured object serialized to JSON, at some point you need to parse the value from JSON. You most typically might do that within the conversion of the source data model to the view model you pass to your rendering code.

    The value from your selector already contains the web image URLs, so presenting the content is just a matter of rendering the appropriate image tags. You can use the image title as its alternate text attribute.

    Here is what it might look like on your live site when you render all assigned images under an article.

    An image of an article with a Bynder-powered image gallery below it.

    Other DAM integration options

    Integration with Bynder is super-easy because Bynder provides a complete selector component to talks to the API. Should you need to integrate with a DAM solution that only provides an API, it is a bit more complex but still not too difficult.

    In such cases, you need to build some kind of search form and listing yourself. You can see how in our article on Integrating with E-commerce (Shopify) and the related custom element code.

    By simply adjusting the selector data model and presentation and connecting it to the appropriate endpoint for the DAM solution, you can easily find and select media from just about any platform.

    What's next?

    You learned how to easily include media from a DAM system in your content.

    The custom image selector sample provides a baseline you can use and further adjust to your needs. Other DAM solutions may provide different selector components, but it is easy enough to update the sample selector code for other systems.

    Should the DAM platform provide only an API but not a selector component, you can learn from our other integration samples on how to build a complete custom selector.