Knowledge Base

Integrate Compact View

Compact View can be integrated into other systems, so that the assets from your Bynder portal can be used in your web application. This component fetches all the content related to the assets and their metadata through the Bynder API and renders it by replicating the Bynder look and feel. Users can search, filter and select assets to then import them into your application.

Some additional configuration is necessary for your portal in order to make use of the Compact View. Read more about setting up the Compact View and best practices below.

How to Set Up the Compact View?

Some additional configuration is necessary for your portal in order to make use of the Compact View. Follow the steps below to make sure your portal is ready.

  1. Contact your Onboarding Manager in case your portal is still in the implementation phase. If not, contact your Customer Success Manager and ask them to set up your portal for using Compact View. Once your portal has been set up correctly, it's time to integrate the Compact View with your external system(s)

  2. Follow these technical implementation instructions if you want to integrate Compact View with an external system. You can also make use of one of our native integrations that already have the Compact View installed.

  3. (Optional) Set up which filters should be automatically applied when opening the Compact View. Read more about it here.

  4. Configure which derivatives you want the Compact View to make use of.

  5. (Optional) Configure the metaproperties you want to show as a filter in the Compact View. Read more about it here.

Automatic filters

When working with external systems it can be useful to have filters automatically applied when opening the Compact View. If users for example already did some filtering in their PIM, you don't want them to get delayed by having to go through the filtering again in the Compact View. Set up pre-applied filters, so that users immediately get to see the relevant assets they need.

Add attributes to the HTML code to automatically trigger values. For example with the attribute data-searchTerm and the value Android the search term Android will be pre-applied when opening the Compact View. Read more about automatic triggers in the Usage section of our technical documentation.

Configure your derivatives

Image files

By default we make use of the webimage derivative for image files. This means that instead of the original file the webimage derivative is added to your content. It is possible to make use of one of the alternative default derivatives or one of your custom public derivatives.

After having selected assets in the Compact View, the API will return all the available derivative URLs that are available for the selected media. Parse the URL of the media derivative that you want to use and make sure this item will be integrated into your external content.

Let's take a look at the HTML example code from our technical documentation, which can be used to integrate the Compact View. You can easily change the image derivative used by replacing the webimage value with the name of the public derivative you want to use instead, as you can see in the code box below.

<img src=' +assetsResponse[0].thumbnails['webimage'] + ' />';

You can retrieve the name all your public derivatives by making the retrieve derivatives API call. Read more about it here and check out the example section below if you want more information.

In the example below you can find the response of the API call to retrieve all the derivatives. The public derivatives have the value "isPublic": 1. These public derivatives can be configured as derivative for the Compact View.

Many clients set up specific derivatives for certain use cases. The Web Banner derivative is often used to automatically generate banners that can be used on websites. The same goes for the Email Banner derivative, which allows email marketeers to easily use a banner with the right dimensions and size for their email marketing campaigns. The social media derivatives are set up, so that users can easily use the pregenerated images to post them on social media channels without having to worry about resizing the images first.

Do you want to use your own public derivative with the Compact View? Copy its name which you can find as value of the prefix field and use this name instead of the webimage value.

[
{
"prefix": "Web Banner",
"height": 300,
"isCrop": 1,
"dpi": -1,
"width": 1000,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1
},
{"prefix": "Email Banner",
"height": 300,"isCrop": 1,
"dpi": -1,
"width": 600,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1},
{
"prefix": "Linkedin",
"height": 220,
"isCrop": 1,
"dpi": -1,
"width": 646,
"allowedTypes": "",
"isOnTheFly": 0,
"isExtent": 0,
"isPublic": 1
},
{
"prefix": "Facebook",
"height": 628,
"isCrop": 1,
"dpi": -1,
"width": 1200,
"allowedTypes": "",
"
Video files

By default we make use of the mp4 video derivative, but you can also make use of the other format webm that we offer. To change the video derivative used, change the HTML code that you use to integrate the Compact View. Replace the mp4 value with webm.

'<source src="' + assetsResponse[0].videoPreviewURLs[0] + '" type="video/mp4">' +

Dropdown

When users use the Compact View to add an asset to their (external) content a dropdown will be available allowing them to select the original file or one of the available derivatives.

dropdown_compact_view.png

Example of the dropdown

The options available in the dropdown cannot be customized. The dropdown shows the following options:

  • The original file

    The asset needs to be marked as public in order for this option to be available.

  • The default derivatives

    The default derivatives that are available for the asset, such as the thumbnail, mini and web image derivatives.

  • Public custom derivatives

    The custom derivatives marked as public that are available for the asset.

Read more about the dropdown part of the SingleSelectFile section in our technical documentation here.

Note

  • The dropdown is only available when adding a single asset. When adding multiple asset using the Compact View the dropdown will not be visible.

  • Depending on the architecture of your integration the dropdown may not be visible in the Compact View.

Configure your metaproperty filters

In order for a metaproperty to show in the Compact View as filter it needs to have the setting 'API field' enabled. Define which metaproperties need to be available and follow the steps below.

  1. Go to Settings > Taxonomy > Metaproperties management.

  2. Hover over the name of the metaproperty you want to make available and click the edit_icon.png icon.

  3. Tick the option Apifield and click Save to save the changes.

  4. (Optional) repeat these steps to set up other metaproperties for the Compact View.

Best Practices for the Compact View

  1. In order to use the Compact View a custom CDN needs to be set up for your portal. Read more about setting up a Cloudfront for your portal here.

  2. All assets that you want to use in the Compact View need to be marked as public. Read more about it here.

  3. Set up the derivatives. You can read more about it here.

Learn more