Kentico Xperience Bynder module

	NuGet package for Xperience administration

Kentico Xperience form control for selecting images from the Bynder digital asset management platform (DAM).

This repository contains source code for the module that integrates Kentico Xperience with Bynder digital asset management platform.

Description

This project contains a Kentico Xperience module that adds the Bynder image selector form control for Xperience administration forms. By assigning the form control to a page type field, users can select and display images stored in the Bynder service when editing pages in the Xperience Pages application.

Requirements and prerequisites

• Kentico Xperience 13 installed.
  • Both ASP.NET Core and ASP.NET MVC 5 development models are supported.
• URL and credentials to your Bynder portal.
• Basic knowledge of developing ASP .NET MVC 5 applications with Kentico Xperience.

Installation

1. Open the solution with your administration project (~/WebApp.sln).
2. Navigate to the NuGet Package Manager Console.
3. Run Install-Package Kentico.Xperience.Bynder.KX13 -Version 0.1.0
4. Build the CMSApp project.
5. Run the Xperience administration to finish the module installation.

Kentico Bynder module with the Bynder image selector form control is successfully installed.

Using the form control

Xperience administration

To utilize the Bynder integration when editing pages in the Xperience administration, you need to assign the Bynder image selector form control to a page type field:

1. Create a new field for the page type with the following properties:

   • Data type: Text
   • Size: 500
     
   • Form control: Bynder image selector

2. Configure the editing control settings (optional):

   • Default domain – The URL of your Bynder portal. If not specified here, you will be prompted to enter the URL when using the form control (e.g. in the Pages application).
   • Use full size modal display mode – Select to set the display mode of the Bynder dialog to 'Full size modal' (this is recommended). If not selected, the smaller 'In a container' dialog will be used.

Live site

Adjust the code of your live site application to display the selected images from Bynder:

1. Replace the generated code of your page type's model in your live site application with the new page type code from the Code tab in the Page types application.
2. Supply the Bynder asset URL to the ViewModel:

public class BynderPreviewViewModel
{
    public string BynderAssetUrl {get; set;}

    public BynderPreviewViewModel(GeneratedPageTypeClass page)
    {
        BynderAssetUrl = !string.IsNullOrEmpty(page.Fields.BynderAsset) ? JObject.Parse(page.Fields.BynderAsset)["assetUrl"].ToString() : null
    }
}

3. Edit the view to show the selected image from the Bynder DAM:

@model BynderPreviewViewModel
<div class="BynderAsset">
    <img src="@Model.BynderAssetUrl" alt="Bynder asset image preview" />
</div>

Get involved

Check out the contributing page to see how to file issues, start discussions, and begin contributing.

Questions & Support

See the Kentico home repository for more information about the product(s) and general advice on submitting your questions.