Universal Editor Custom Asset Picker
This extension allows creating a configurable, custom asset picker for Universal Editor that is tailored to your need by simply providing a JSON configuration file. Relevant crosswalk project needs to follow certain guidelines. It's useful in case where we want to enable authors to select assets of certain file types, image sizes, only from specified repositories etc.
Extension Overview
This extension enhances Universal Editor properties panel for media elements. It replaces standard asset picker with a custom version of asset picker, with provided configuration applied while selecting assets.
Following type of configuration is available:
- AEM tier type ("delivery", "author" etc.)
- Repo names to select assets from
- ApiKey
Configuration also supports following types of filters:
- File type (Images, Video etc.)
- Asset size (height, width)
Configuration in Edge Delivery Site
Adding a component for author in crosswalk site is like adding any other custom component, with some added fields. A sample custom component Custom Image One
will have following code in files:
A New Component Model in component-models.json
Copied to your clipboard[...{"id": "custom-asset-one","fields": [{"component": "custom-asset-namespace:custom-asset","name": "image","label": "Image","configUrl": "https://main--xwalk-test-gems--githubusername.hlx.page/tools/assets-selector/image.config.json","valueType": "string"},{"component": "custom-asset-namespace:custom-asset-mimetype","valueType": "string","name": "imageMimeType"},{"component": "text","name": "imageAlt","label": "Alt Text","valueType": "string"}]}]
id
: can be any value.Image component
: must havecustom-asset-namespace:custom-asset
value, because it has been overridden in the extension to display customized asset selector popup.configUrl
: points to JSON configuration file, can be hosted anywhere you prefer. Must be accessible to the extension, which runs in author's web browser. Extension will fetch this JSON file and configure asset picker for this component accordingly.imageMimeType component
: must havecustom-asset-namespace:custom-asset-mimetype
value, because it has been overridden in the extension to contain selected asset MIME Type.Alt-Text component
: Optional, it's like any other additional component you may want to add.
This model is necessary for custom asset picker to show up when user clicks on its option it in properties panel.
A New Definition in component-definition.json
Copied to your clipboard{"groups": […{"title": "Blocks","id": "blocks","components": […{"title": "Custom Image One","id": "custom-asset-one","plugins": {"xwalk": {"page": {"resourceType": "core/franklin/components/block/v1/block","template": {"name": "Custom Image One","model": "custom-asset-one"}}}}}]}]}
Note that the value of model is the id of model we created in component-models.json
title
will show up as component name in➕
(add component) button menu present on right side panel of universal editor.
Entry in component-filters.json
Copied to your clipboard[…{"id": "section","components": ["text","image","button",…"custom-asset-one"]}]
Overriding name of component for using custom asset picker
in component-models.json
file, the component property need to have component as custom-asset-namespace:custom-asset
and custom-asset-namespace:custom-asset-mimetype
.
If desired, this can be overridden by following method:
- Adding a parameter in extension configuration with key as
asset-namespace
and any desired value (e.g.my-namespace
). - Use
my-namespace:custom-asset
andmy-namespace:custom-asset-mimetype
instead of above values incomponent-models.json
.
Configuration File
This is sample asset picker configuration file that allows filtering assets by image-only file type and asset width between 0 - 1000px. It also has some other configuration fields which are self-explanatory.
Copied to your clipboard{"aemTierType": ["delivery","author"],"apiKey": "asset_search_service","repoNames": ["author-p7452-e733061.adobeaemcloud.com","author-p7452-e12437.adobeaemcloud.com","delivery-p130360-e1272151.adobeaemcloud.com","author-p130360-e1272151.adobeaemcloud.com"],"preferredDimensions":{"minWidth": 500,"maxWidth": 2000,"minHeight": 500,"maxHeight": 2000},"filterSchema": [{"fields": [{"element": "checkbox","name": "type","defaultValue": ["image/*"],"options": [{"label": "Image","value": "image/*","readOnly": true}],"orientation": "horizontal"}],"header": "File Type","groupKey": "FileTypeGroup"},{"fields": [{"element": "Number","name": "property=tiff:imageWidth","range": true,"quiet": true,"label": "Width","hideArrows": true,"columns": 2,"readOnly": true,"defaultValue": [{"min": 0,"max": 1000}]}],"header": "Size","groupKey": "SizeGroup"}]}
Limitations
- This custom asset picker can only be opened by clicking on selector in its properties panel. Unlike default asset picker, we can't click the asset to open it.