This key represents an individual metadata entry object in the preview.metadata array.
The value is an object that can contain text, image, icon, icon_color, and icon_background_color properties. Each metadata entry is displayed on Cards in the Collection browser, Structures, and Snippets.
Appears in
Type
Object
Properties
icon — Array Preview Entry|Key Preview Entry|Template Preview Entry|Text Preview Entry|Raw Text Preview Entry|False Preview Entry#This key defines the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, text string, that results in one of Google's Material Symbols. When multiple entries are provided, CloudCannon will use them in order as fallback options.
For Cards in the Collection Browser, this key defaults to the value of collections_config.*.icon. Otherwise, this key has no default.
Appears in: preview, metadata[*], gallery, picker_preview, Snippet preview.
Show examplesHide examples
In this example, we have configured the icon for Cards in the blog Collection to use the edit_note icon.
collections_config:
blog:
preview:
icon: edit_note{
"collections_config": {
"blog": {
"preview": {
"icon": "edit_note"
}
}
}
}In this example, we have configured the icon for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of logo first, then fall back to the edit_note icon.
collections_config:
blog:
preview:
icon:
- key: logo
- edit_note{
"collections_config": {
"blog": {
"preview": {
"icon": [
{
"key": "logo"
},
"edit_note"
]
}
}
}
}icon_background_color — Array Preview Entry|Key Preview Entry|Template Preview Entry|Text Preview Entry|Raw Text Preview Entry|False Preview Entry#This key defines the background color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.
Appears in: preview, metadata[*], gallery, picker_preview, Snippet preview.
Show examplesHide examples
In this example, we have configured the icon background color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of bg_color first, then fall back to the static hex color value.
collections_config:
blog:
preview:
icon_background_color:
- key: bg_color
- text: '#f0f0f0'{
"collections_config": {
"blog": {
"preview": {
"icon_background_color": [
{
"key": "bg_color"
},
{
"text": "#f0f0f0"
}
]
}
}
}
}icon_color — Array Preview Entry|Key Preview Entry|Template Preview Entry|Text Preview Entry|Raw Text Preview Entry|False Preview Entry#This key defines the color of the icon displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Color values can be hex codes (e.g., #ff0000), CSS color names, or reference a data key that contains a color value.
Appears in: preview, metadata[*], gallery, picker_preview, Snippet preview.
Show examplesHide examples
In this example, we have configured the icon color for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of color first, then fall back to the static hex color value.
collections_config:
blog:
preview:
icon_color:
- key: color
- text: '#ff0000'{
"collections_config": {
"blog": {
"preview": {
"icon_color": [
{
"key": "color"
},
{
"text": "#ff0000"
}
]
}
}
}
}image — Array Preview Entry|Key Preview Entry|Template Preview Entry|Text Preview Entry|Raw Text Preview Entry|False Preview Entry#This key defines the image displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string that results in a file path or URL to an image file. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Appears in: preview, metadata[*], gallery, picker_preview, Snippet preview.
Show examplesHide examples
In this example, we have configured the image for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of featured_image first, then the {thumbnail} template, and finally fall back to the static text value.
collections_config:
blog:
preview:
image:
- key: featured_image
- template: '{thumbnail}'
- text: default-image.jpg{
"collections_config": {
"blog": {
"preview": {
"image": [
{
"key": "featured_image"
},
{
"template": "{thumbnail}"
},
{
"text": "default-image.jpg"
}
]
}
}
}
}In this example, we have configured the image for Structure Cards to display the profile_picture key.
_structures:
staff:
values:
- value:
_type: Employee
name:
profile_picture:
preview:
image:
- key: profile_picture{
"_structures": {
"staff": {
"values": [
{
"value": {
"_type": "Employee",
"name": null,
"profile_picture": null
},
"preview": {
"image": [
{
"key": "profile_picture"
}
]
}
}
]
}
}
}text — Array Preview Entry|Key Preview Entry|Template Preview Entry|Text Preview Entry|Raw Text Preview Entry|False Preview Entry#This key defines the main text displayed on Cards in the Collection browser, Structures, and Snippets.
The value can be an array or a single value, and reference a key, template, or text string. When multiple entries are provided, CloudCannon will use them in order as fallback options.
Appears in: preview, metadata[*], gallery, picker_preview, Snippet preview.
Show examplesHide examples
In this example, we have configured the main text for Cards in the blog Collection with an array of values to provide fallback options. CloudCannon will use the value of title first, then the {name} template, and finally fall back to the static text value.
collections_config:
blog:
preview:
text:
- key: title
- template: '{name}'
- text: Untitled{
"collections_config": {
"blog": {
"preview": {
"text": [
{
"key": "title"
},
{
"template": "{name}"
},
{
"text": "Untitled"
}
]
}
}
}
}In this example, we have configured the main text for Cards in the blog Collection to display the title key.
collections_config:
blog:
preview:
text:
- key: title{
"collections_config": {
"blog": {
"preview": {
"text": [
{
"key": "title"
}
]
}
}
}
}Examples
In this example, we have configured a metadata entry for Cards in the blog Collection to display the URL using a template.
collections_config:
blog:
preview:
metadata:
- template: '[url]'{
"collections_config": {
"blog": {
"preview": {
"metadata": [
{
"template": "[url]"
}
]
}
}
}
}