Configuring Adobe Experience Manager Assets Sidekick Plugin

This article lists down the steps to configure the Experience Manager Assets Sidekick plugin. With this plugin, you can use assets from your Experience Manager Assets repository while authoring documents in Microsoft Word or Google Docs. For more information on authoring experience while using this plugin, please see Adobe Experience Manager Assets Sidekick Plugin.

Note: Using non-image assets such as Videos and PDF documents is in an Early Adopter program. Find more details here.

Add configuration to your AEM Sidekick

To enable the Assets plugin in your AEM Sidekick for website authors, please follow these steps in your project’s GitHub.

1. The Sidekick configuration file is located at tools/sidekick/config.json in your AEM Franklin site's GitHub repository. If it does not already exist, create it. For more details, please refer to this document on extending AEM Sidekick.
2. The important part is the "assets-library" plugin. You can either add the plugin definition to your existing configuration, or replace your configuration with the content below. Please note that you should provide a title for the plugin that website authors will understand (“My Assets” in the example below)

{
	"id": "asset-library",
	"title": "My Assets",
	"environments": [
	"edit"
	],
	"url": "https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/franklin/asset-selector.html",
	"isPalette": true,
	"includePaths": [ "**.docx**" ],
	"passConfig": true,
	"paletteRect": "top: 50px; bottom: 10px; right: 10px; left: auto; width:400px; height: calc(100vh - 60px)"
}

1. Make sure to commit the above sidekick config in your project's Github repo.
2. Open up the AEM sidekick in your Microsoft Word or Google Doc. You should see the "My Assets" button in it.
   

Advanced configurations

You can optionally customize the AEM Assets sidekick plugin by specifying query parameters in the asset selector URL in the Sidekick config.json file. The following parameters are supported:

rail

Permissible Values: true/false

Use this parameter to toggle the rail view of the Asset Selector. By default, the “rail” view navigation is used, which is more compact and offers search-only experience. If you set the parameter to “?rail=false”, a tree view left panel is shown with the repository folder hierarchy letting users browse for assets in addition to searching.

Please note that the folder hierarchy view occupies some extra space. To accommodate for it, you may have to increase the width of the Asset Selector panel.
Here is an example configuration:

{
    "id": "asset-library",
    "title": "My Assets",
    "environments": [ "edit" ],
    "url": "https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/franklin/asset-selector.html?rail=false",
    "isPalette": true,
    "includePaths": [ "**.docx**" ],
    "passConfig": true,
    "paletteRect": "top: 50px; bottom: 10px; right: 10px; left: auto; width:800px; height: calc(100vh - 60px)"
}

The Asset Selector component leverages micro-frontend Asset Selector that is instrumented to integrate with Sidekick for easy integration. To learn more, see Micro-Frontend Asset Selector documentation.

Specifying copy mode for Images

On top of adding standard configuration for AEM Assets sidekick plugin, you can optionally customize & override the default copy behavior for image assets with the help of asset selector config file. The file is located at tools/asset-selector/config.json. If it doesn’t already exist, create it.

{
    "copyMode": [{
        "mimeType": "image/*",
        "value": "reference"
    }]	
}

Make sure to commit the above asset-selector config in your project's Github repo

Dynamic Media with Open API is currently in early adopter (requires Dynamic Media license), with the key tenet of replacing static binaries in site authoring with binary-less asset references. Please reach out to your account team or support Adobe slack channel to get more information. Meanwhile, experience the new way of site authoring here.

Note: Once the config is enabled, all the copied image assets references will be treated as a button/anchor reference by default. To overcome this, the default logic needs to be overridden to convert all external links with a <picture/> tag with appropriate srcset - Find more details here