Knowledge Base

Bynder for Sitecore Connector

Would you like to use your Bynder assets in the Sitecore content you create? The Bynder for Sitecore connector allows you to select image, video and document assets via Bynder's Compact View and add them to your Sitecore content using the Bynder reference URLs. This ensures that you automatically have the latest version of your Bynder assets reflected in your Sitecore content.

Find out below how you can set up and make use of the Bynder for Sitecore Connector.

We recommend using the Bynder Sitecore Connector. If you prefer importing your Bynder assets into the Sitecore media library check out our Sitecore importer for Bynder.

How to download the Sitecore Connector?

Contact your Customer Success Manager or Implementation Consultant if you would like to make use of the Sitecore Connector. They can provide you with an installation package.

How to install the Sitecore Connector?

You can install this package using the normal Sitecore Installation Wizard.

How to set up the Sitecore Connector?

The Bynder for Sitecore Connector package offers two different field types. The developer team of the client can use these Bynder fields in their templates that actually need to render out Bynder data.

  1. Go to your Sitecore Experience Platform and click Content Editor.
  2. Open the item you want to add the fields to. For example the Home item.
  3. Open the template linked to the item.
  4. Go to the Builder tab, add the necessary field(s) below and enter a name for the field(s) in the Name column.
  • Bynder Single Asset Selector
    With this field a content author can select only one Bynder asset using the Compact View.
  • Bynder Multi Asset Selector
    With this field a content author can select multiple Bynder assets using the Compact View.
  1. Click Save to save the new fields.

The JSON value of the Bynder selection is stored inside the Sitecore field as a value. This selection could consist of one or more image or video assets.

The field is hidden for the content authors so that they are not able to modify it. In order to offer a preview, the system renders a derivative in the content editor using the Cloudfront image CDN URL, so that content authors see the actual asset(s) they selected in Bynder. By default we make use of CloudFront. Alternatively, you can also use your own CDN solution and manage the caching on your side.

Bynder field types

You can use the two extension methods that the Bynder for Sitecore Connector offers. This will convert the stored Bynder asset(s) from JSON to a typed C# BynderAsset object. In the Sitecore MVC view you can use the following using statement:

@using Bynder.Sitecore.Connector.Extensions

You can then call the following extension methods depending on the Bynder field type you're using.

ConvertToBynderAsset()
ConvertToBynderAssets()

The below example shows how you can convert field values into bynder asset objects:

@using Bynder.Sitecore.Connector.Extensions
@model Sitecore.Mvc.Presentation.RenderingModel
@{
    string bynderImageFieldName = "BynderImage";
    string bynderImagesFieldName = "BynderImages";
    var bynderAsset = string.IsNullOrEmpty(Model.Item[bynderImageFieldName]) ? null : Model.Item[bynderImageFieldName].ConvertToBynderAsset();
    var bynderAssets = string.IsNullOrEmpty(Model.Item[bynderImagesFieldName]) ? null : Model.Item[bynderImagesFieldName].ConvertToBynderAssets();
}

The below example shows how you can access all the available data for an asset:

```cshtml
<div>
    <h1>Bynder Single Asset example</h1>
    @if (bynderAsset != null)
    {
        <p>Id = @bynderAsset.Id</p>
        <p>Name = @bynderAsset.Name</p>
        <p>Description = @bynderAsset.Description</p>
        <p>BrandId = @bynderAsset.BrandId</p>
        <p>Archive = @bynderAsset.Archive</p>
        <p>Copyright = @bynderAsset.Copyright</p>
        <p>Date created = @bynderAsset.DateCreated.ToString("yyyy MMMM dd")</p>
        <p>Date modified = @bynderAsset.DateModified.ToString("yyyy MMMM dd")</p>
        <p>Date published = @bynderAsset.DatePublished.ToString("yyyy MMMM dd")</p>
        if (bynderAsset.Extension != null)
        {
            <p>Extension = @string.Join(",", bynderAsset.Extension)</p>
        }
        <p>Filesize = @bynderAsset.FileSize</p>
        <p>Height = @bynderAsset.Height</p>
        <p>Width = @bynderAsset.Width</p>
        <p>IsPublic = @bynderAsset.IsPublic</p>
        <p>Limited = @bynderAsset.Limited</p>
        if (bynderAsset.Tags != null)
        {
            <p>Tags = @string.Join(",", bynderAsset.Tags)</p>
        }
        <p>Orientation = @bynderAsset.Orientation</p>
        <p>Type = @bynderAsset.Type</p>
        <p>Watermarked = @bynderAsset.Watermarked</p>
    }
</div>
```

Derivative configuration

In the Sitecore MVC view you can access the derivatives of the Bynder asset. Read more about Bynder derivatives here. In the below example you can see how to render one of the derivatives by using the derivative name.

```cshtml
&lt;img src="@bynderAsset.Thumbnails["webimage"]"/&gt;
```

**You could also render out all the derivatives like this:**

```cshtml
foreach (var thumbnail in bynderAsset.Thumbnails)
        {
            &lt;img src="@thumbnail.Value" alt="@bynderAsset.Description"/&gt;
            &lt;p&gt;
                &lt;strong&gt;The derivative of the above image is @thumbnail.Key&lt;/strong&gt;
            &lt;/p&gt;
        }
```

Sitecore Experience Editor Support

Since the JSON values are stored in the Bynder fields, the default Sitecore MVC HTML helper methods cannot be used. Also the contents of the Bynder fields cannot be edited or rendered. As a workaround you can make use of Sitecore's Custom Experience Buttons and asign them to the given rendering where you're using the Bynder field functionality. This allows you to edit the Bynder field(s) by clicking the Custom Experience Button and staying inside the Experience Editor.

Supported Sitecore versions

The following Sitecore Experience Platform versions are supported with the Bynder for Sitecore Connector:

Sitecore 9.2

Sitecore 9.1

  • Sitecore 9.1.0 rev. 001564 Initial Release (November 2018)
  • Sitecore 9.1.1 rev. 002459 Update-1 (April 2019)
  • Sitecore 9.0
  • Sitecore 9.0.0 rev. 171002 Initial Release
  • Sitecore 9.0.1 rev. 171219 Update-1
  • Sitecore 9.0.2 rev. 180604 Update-2

Sitecore 8.2

  • Sitecore 8.2 rev. 161115 Update-1
  • Sitecore 8.2 rev. 161221 Update-2
  • Sitecore 8.2 rev. 170407 Update-3
  • Sitecore 8.2 rev. 170614 Update-4
  • Sitecore 8.2 rev. 170728 Update-5
  • Sitecore 8.2 rev. 171121 Update-6
  • Sitecore 8.2 rev. 180406 Update-7

Sitecore 8.1

  • Sitecore 8.1 rev. 151003 Initial Release
  • Sitecore 8.1 rev. 151207 Update-1
  • Sitecore 8.1 rev. 160302 Update-2
  • Sitecore 8.1 rev. 160519 Update-3

Sitecore 8.0

  • Sitecore 8.0 rev. 141212 Initial Release
  • Sitecore 8.0 rev. 150121 Update-1
  • Sitecore 8.0 rev. 150223 Update-2
  • Sitecore 8.0 rev. 150427 Update-3
  • Sitecore 8.0 rev. 150621 Update-4
  • Sitecore 8.0 rev. 150812 Update-5
  • Sitecore 8.0 rev. 151127 Update-6
  • Sitecore 8.0 rev. 160115 Update-7

Not supported

  • Sitecore 8.2 rev. 160729 Initial Release (due to Sitecore bug: Reference number 120395)
  • Pre- Sitecore 8.0 versions