☁️ Loving our new documentation website? Provide feedback in the CloudCannon Community! ✨

Developer ReferenceConfiguration File

Preview Entry

Table of contents

Description:

This key defines a preview entry configuration for displaying data on Cards in the Collection browser, Structures, and Snippets.

The value can be an object with a key, template, or text property, a raw text string, false, or an array of these values. When multiple entries are provided, CloudCannon will use them in order as fallback options. Preview entries are used to configure how data is displayed in card previews.

Appears in:
└── Array Preview Entry
    └── Preview Entry
Types:
Key Preview EntryObject#

This key represents a key preview entry type for displaying data from a specific key on Cards in the Collection browser, Structures, and Snippets.

The value is an object that contains a key property with a string value. This displays the value of the specified data key in card previews.

Show examplesHide examples

In this example, we have configured a key preview entry to display the title key.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - key: title
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "key": "title"
          }
        ]
      }
    }
  }
}
Template Preview EntryObject#

This key represents a template preview entry type for displaying formatted text using a template on Cards in the Collection browser, Structures, and Snippets.

The value is an object that contains a template property with a string value. This displays formatted text using template syntax (e.g., {name}) in card previews.

Show examplesHide examples

In this example, we have configured a template preview entry to display formatted text.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - template: '{author} - {date}'
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "template": "{author} - {date}"
          }
        ]
      }
    }
  }
}
Text Preview EntryObject#

This key represents a text preview entry type for displaying static text on Cards in the Collection browser, Structures, and Snippets.

The value is an object that contains a text property with a string value. This displays static text in card previews.

Show examplesHide examples

In this example, we have configured a text preview entry to display static text.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - text: Untitled
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "text": "Untitled"
          }
        ]
      }
    }
  }
}
Raw Text Preview Entrystring#

This key represents a raw text preview entry type for displaying static text on Cards in the Collection browser, Structures, and Snippets.

The value is a string that specifies static text to display in card previews. This is equivalent to using { text: "..." } but in a simpler format.

Show examplesHide examples

In this example, we have configured a raw text preview entry to display static text.

Copied to clipboard
collections_config:
  blog:
    preview:
      text: Untitled
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": "Untitled"
      }
    }
  }
}
False Preview Entryfalse#

This key represents a preview entry that disables the preview display for a specific field on Cards in the Collection browser, Structures, and Snippets.

The value must be false. Setting a preview entry to false will hide that preview element.

Show examplesHide examples

In this example, we have configured the preview text to be disabled.

Copied to clipboard
collections_config:
  blog:
    preview:
      text: false
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": false
      }
    }
  }
}
Examples:

In this example, we have configured a preview entry 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.

Copied to clipboard
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 a preview entry to display the title key.

Copied to clipboard
collections_config:
  blog:
    preview:
      text:
        - key: title
{
  "collections_config": {
    "blog": {
      "preview": {
        "text": [
          {
            "key": "title"
          }
        ]
      }
    }
  }
}
Open in a new tab