Knowledge Base

Connect Sitecore to Bynder

Would you like to use your Bynder assets in Sitecore? Save yourself the time of having to upload assets twice and directly use them in Sitecore with one of the available connectors.

The Basic Sitecore Connector makes use of the Bynder reference URLs and ensures that you automatically have the latest version of your Bynder assets reflected in your Sitecore content.

Would you like the Bynder assets to be stored in Sitecore? Use the Advanced Sitecore Connector if you prefer to have the fe copy the Bynder assets over to Sitecore's media libarary.

Choose one of the connectors below for more information.

With the Basic Sitecore Connector you can directly add image, video and document assets from Bynder to your Sitecore content. The Compact View allows you to search and filter the assets you want to use. They will be added using the Bynder reference URLs, which ensures that the latest version of the asset will always be reflected in your Sitecore content.

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

Note

If you prefer importing your Bynder assets into the Sitecore media library check out our Advanced Sitecore Connector.

How to Download the Basic Sitecore Connector?

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

How to Install the Basic Sitecore Connector?

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

How to Set Up the Basic Sitecore Connector?

The Basic 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 Basic 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()

See the example below:

```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 Sitecore Experience Editor Support 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 Basic Sitecore Connector:

Note

The Basic Sitecore Connector is not compatible with Sitecore JSS.

Sitecore 9.3

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

Would you like to store and use your Bynder assets in Sitecore without having to reupload them? The Advanced Sitecore Connector imports Bynder image, video and document assets into Sitecore, so that you can add them to your Sitecore content. Alternatively, you can also decide not to import the assets and distribute them using the Bynder reference URLs. The connector can also sync with Bynder, so that any changes made to the assets in Bynder also become visible in Sitecore.

If you are an admin, you can schedule a regular update task to automatically update the images in Sitecore with the changes made in Bynder.

Skip directly to

Tell me More about the Advanced Sitecore Connector

You can import assets from Bynder into Bynder folders within Sitecore's media library. To do this, you connect to Bynder from Sitecore and select the assets in the Compact View. You can use the filters available in your Bynder portal to find the assets you need.

Alternatively, you can also add the Bynder assets by making use of the Bynder reference URLs. In that case the assets will not be imported and stored in your Sitecore media libarary.

If assets get updated in Bynder, you can run a synchronization task so that the assets are also updated in Sitecore.

After the assets from Bynder are imported to the Sitecore media library, they can be inserted in the Rich Text Editor and image fields. You can use Sitecore's built-in features such as cropping, resizing, and rendering to adjust the images to your liking.

Supported Versions

The Sitecore versions 8.x - 9.3 are supported.

Derivatives Used

By default, the Bynder assets will be imported into Sitecore with all their public derivatives. If necessary this can be customized to a preferred selection of derivatives. Read more about it here.

Use the Plugin
Limitations
  • Currently we don't support importing audio assets from Bynder to Sitecore.

  • Only basic asset information such as width, height and the MIME type are imported with the asset. Bynder metaproperties or tags are not imported.

Learn More