Knowledge Base

Integrate Bynder With Sitecore

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 Sitecore Connector allows users to access Bynder image, video and document assets within the Sitecore environment so that Bynder can be the centralized source for all digital content. The integration can be configured to use Bynder’s public links or to create a Bynder reference within the Sitecore media library. With either installation, you can ensure the latest version of your Bynder assets is always automatically available.

Choose the version of Sitecore you want to integrate below to discover what Sitecore connector options are available for your Sitecore installation.

Note

Do you want to install or upgrade your Bynder Sitecore Connector?

  • Consult your Sitecore Implementation partner before installing the Bynder Sitecore Connector on your production environment to avoid breaking any automated release process.

  • Make sure to check the documentation provided below before upgrading to avoid breaking your Sitecore instance.

  • Depending on which version of the Bynder Sitecore Connector you install some features may not be available.

What Is Your Sitecore Version?

Tip

To have the best user experience we recommended using the most recent version of Sitecore. Bynder develops and maintains the connector to offer functionality compatibility with Sitecore’s latest improvements.

Legacy versions are still made available for use with older versions but may result in difference in functionality as enhancements are designed for versions aligned with Sitecore’s mainstream support.

Check out the Sitecore Product Support Lifecyle for more information.

This version of the Bynder Sitecore Connector supports Sitecore version 9.3 and above.

How to Install and Configure the Bynder Sitecore Connector?

Check the following links for the Connector for Sitecore 9.3 and above:

Check the video below for installation and configuration instructions.

How to Use the Bynder Sitecore Connector?

Check out these instructions to find out how you can use the Bynder Sitecore Connector.

Note

The mainstream support for Sitecore version 9.2 ends December 31st, 2022. Read more about the Sitecore Product Support Lifecycle.

This version of the Bynder Sitecore Connector supports Sitecore version 9.0 to 9.2.

How to Install and Configure the Bynder Sitecore Connector?

Check the following links for the Connector for Sitecore version 9.0 to 9.2 and above:

How to Use the Bynder Sitecore Connector?

Check out these instructions to find out how you can use the Bynder Sitecore Connector.

The Basic and Advanced Sitecore Connector support Sitecore version 8.X except from Sitecore 8.2 rev. 160729.

Watch the video below to understand the differences between the Basic and Advanced connector or open the dropdowns below the video to learn more about the Basic and Advanced Sitecore Connector.

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 Sitecore importer for BynderAdvanced 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 Basic Sitecore Connector supports Sitecore 8.X except from Sitecore 8.2 rev. 160729.

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 Basic Sitecore Connector supports Sitecore 8.X except from Sitecore 8.2 rev. 160729.

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