Bynder

You can add a Bynder custom field extension to your stack that allows you to fetch images from Bynder and display them into a field in your content type. Subsequently, while creating entries, you can select one or more images as the input value for the field.

This step-by-step guide explains how to create a Bynder custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Create a Bynder account
  2. Add the Bynder custom field extension to your stack
  3. Use your custom field

Prerequisites

  1. Create a Bynder Account

    To use this extension, you need to create an account in Bynder. To do that, follow the steps given below:

    1. Go to https://www.bynder.com/en/ and create a new account. It is recommended to use the partnership account by purchasing the license. The free trial account won't work as expected. 
    2. You will receive a confirmation email, click on the provided link and change your password. 

    You'll then get a URL. Make a note of it as you will need it when you set up the extension in Contentstack. Read more about getting started with Bynder.

    Now, let's move ahead and set up our extension.

  2. Add the Bynder Custom Field Extension to your Stack

    1. Go to your stack, navigate to the Settings gear icon, and select Extensions.
    2. On the Extensions page, click on the + Add Extension button and then on Create new. Alternatively, you can click on the Create a new one link as shown below:

      create new extension
    3. On the Select Extension Type screen, select Custom Field.

      select custom
    4. On the Create New Extension page, enter details in the fields as given below:
      1. Title: Provide a suitable title. For example, Bynder.
      2. Field data type: Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case.
      3. Multiple: Keep this unchecked.
      4. Hosting method: The hosting method will be set to "Hosted By Contentstack." This option allows the source code for the custom field to be displayed in the "Extension Source Code" field.
      5. Extension Source Code: In this field, you need to enter the extension code. To get the code, contact us at support@contentstack.com

        Once it's downloaded, copy the code from the index.html file located in the root folder and paste it in the "Extension source code" field.

        Note: In the downloaded code, inside the source folder, there's a bynder-widget HTML file. Upload this file as an asset in Contentstack by following the steps mentioned in the Create/Upload asset article. After uploading the file, you'll get a URL in the asset details section, make note of this URL.
      6. Config Parameter: Enter the following configuration details as the extension's config parameter:
        {
            "widgetUrl": "<<widgetUrl>>",
            "defaultDomain": "<<defaultDomain>>"
        }
        The value for widgetUrl is the URL of the bynder-widget HTML file which you just uploaded as an asset. The value for defaultDomain is the same URL that you generated after the creation of your account in Bynder.
    5. Click on Save. This creates your custom field.

    Now, let’s understand how you can start using this custom field in your content type.

  3. Use Your Custom Field

    To use your custom field, you need to follow the steps given below:

    1. Create a content type by clicking on the + New Content Type. Provide a suitable name to your content type, an optional description, and click on Create and Add fields.

      bynder content type

      This leads you to the Content Type Builder page where you can add the relevant fields.
    2. Add the Custom field in your content type. Provide a name to it, for example, Bynder, and add other fields such as a single line text box, and so on.

      custom field
    3. In the Edit Properties pane on the right-hand side, select the custom field from the drop-down (that is, Bynder) and set the other properties of your custom field.

      custom field added
    4. After adding other relevant fields in your content type, click on Save and Close. This will create your content type. 
    5. Now open the content type and create an entry as usual. You will see Bynder extension field in your entry as shown below:

      bynder field added
    6. Click on Choose Assets. If you are still logged into Bynder, it will open inside your entry page, from where you can select multiple images and insert them in your entry as shown in the following screenshot:

      bynder field final

Note: The number of items that can be selected depends on the size of the JSON that is to be stored, and currently, only 10 KB of data can be stored. This is due to limitation of the JSON data stored via Custom Field. Refer to our Custom Field Limitation doc for more detail.

On This Page

top-arrow