Sitecore Integration – Bynder Support

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.

Sitecore 9.3 & Above

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.

Sitecore 9.0 - 9.2

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.

Sitecore 8.X

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.

Basic 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 Bynder

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.

Go to your Sitecore Experience Platform and click Content Editor.
Open the item you want to add the fields to. For example the Home item.
Open the template linked to the item.
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.

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.

Advanced Sitecore Connector

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

Supported versions
Derivatives used
Installation
Configuration
Use the plugin
Limitations

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.

Configuration

On the Sitecore Experience Platform overview page click the Content Editor tile.
In the left sidebar, open System > Modules > Experience Explorer > Bynder Settings and select the Bynder environment you want to configure.
Enter the EnvironmentURL. For example: https://www.byndair.getbynder.com

The URL is validated on the fly, so if it is not correct, a validation error displays.
Enter the ConsumerKey, ConsumerSecret, TokenKey, and the TokenSecret. You can either generate those in your Bynder portal or get them from your Customer Success Manager. If you generate your own keys, see Create API tokens for your app.
In the Files to import field you can configure on a portal level whether the original file, one or more derivatives or all files should be imported. Enter one of the following values:

original

This will import the original file.

derivative name Enter the name of the public derivative to import it. Comma separate the names in case you want to import multiple derivatives.

all This will import the original file and all of the available public derivatives.

all-derivatives This will import all the available public derivatives but not the original file.

Click to enlarge
Tip

Would you like to configure the files to import on a media folder level?
1. Open to the Bynder tab in Sitecore.
2. In the Media Library on the left side click the media folder for which you want to set this up.
3. Open the Content tab.
4. Make sure the option Import derivatives is enabled.
5. In the Files to import field enter one of the following values as described in step 5.
Click to enlarge
Select the Do not import BLOBs option if do not want to import the assets in the Sitecore Media Library. The connector will make use of the Bynder reference URLs instead.

Note

If this option is enabled the thumbnail derivative of an asset will still be imported in order to have a preview available in Sitecore.
Save the changes.
(Optional) To add another Bynder environment in Sitecore, you need to introduce changes to the master database of Sitecore. Go to System > Modules > Experience Explorer > Bynder Settings and add another environment, by for example, creating a copy of the Default and adjusting the details.

To change the environment you want to work with:
1. Open the Media Library tab.
2. Click the Bynder folder in the navigation tree.
3. Click the button.
4. Select the environment you want to work with.
Verify that you have set your API user correctly. The API user you use to log in to import assets from Bynder to Sitecore must have the permissions in Bynder to view, edit, and download assets.
(Optional) Set up automatic updates to pull changes from Bynder into Sitecore at a specific time. To do this, you need to introduce changes to the master database of Sitecore.
1. Go to System > Tasks> Schedules > Bynder > Update Media.
2. Specify when the syncing should happen.
3. Save your changes.
Note

You can also check the Sitecore log files to see if the sync ran successfully.

Use the Plugin

Import media from Bynder

In the Home tab expand Media Library.
Click Bynder.
Click Import from Bynder.

Note

If an error displays when you try to import images, it might be due to your permission settings. In this case, you need to contact your administrator.
Log in to the Bynder environment.

Note

If for some reason, the Compact View does not load, open a new tab, and log in to your Bynder environment there. Then, try logging in again from Sitecore.
Select the assets from the Compact View and click OK. You can use the filters available in Bynder to search for the assets to import.
The assets get imported to Bynder and placed in the Bynder folder.
Note
- The imported asset is named according to the following pattern: assetName(no extension)-derivativeName. For example: myasset-Large.
- The alt field in Sitecore gets populated with the asset description as it is in Bynder. If the description is not present, the field is populated with the asset name.
- To import assets to a separate folder, open the Bynder folder and click the Media Folder button. Provide the name of the folder and click OK. If you import files from Bynder now, they will be imported into the new folder.
(Optional) Click an image in the image folder to view the asset details. Here you can find the title, description, dimensions and tags of the Bynder asset. If applicable, the CDN URL will be available here as well.

Use the Imported Images

Whenever you import an asset or there is a new version of an asset, you need to approve it before you can use it.

Open the Workbox tab.
From the Workflows list, select Bynder Workflow.
Select the items you want to use and click Approve (selected). The approved items are now ready to be used.
Go to the Sitecore Experience Platform overview screen, open the Experience Editor and go to the content page that you want to add a Bynder asset to.
Add a new image or edit an existing one and open the media library to select an asset.
Go the the Bynder media folder where you can find the asset you want to add, select it and click the Select button.

Note

The size of the image may be too big at first.
Save your page to save the changes. The size of the image will now be adjusted to the page settings.

Update Sitecore Items

To update an item, click on it. If you want to update the complete folder, click on the Folder in your navigation tree. The folder update, updates all children folders as well.
Click the Update button for syncing to take place.

Note

If you are an admin, you can set up automatic syncing that takes place at a specific hour. See Automatic updates.

When assets in Bynder have been updated, and these changes have been imported to Sitecore, they are reflected in the item's details.
Note
- The version field displays the version as it is in Bynder. The asset displayed will always be the active version available in Bynder. So if there are 3 versions of the asset in Bynder, the field will display 3. Sitecore has a separate versioning system, so an asset might have 3 versions in Bynder and only one in Sitecore.
- If the derivative name has been changed in Bynder, the sync will not be successful for an asset. You then need to re-import the asset to get the updated derivative.

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