Content cards

A content card shows a graphical representation of a content item in the Content Library. This makes it easier for users to quickly identify a piece of content when viewing items in grid view. Cards are web apps that are associated with a content type, and depending on your requirements you can either use one of the built-in cards or create your own.

Choosing a card for a content type

To choose which card should be used for content of a particular type, open the Register content type window and click "Add content type card".

Adding a card
Adding a card

If you want to use your own card, enter its URL in the Card URL field, otherwise choose one of the built in cards: gallery, photo, summary-photo or text. See the Custom cards page for more information about creating your own cards.

Mapping content type properties to a card

Each card includes a number of configurable fields that determine how the card content should be displayed. You will map the chosen properties in your content type to the fields displayed on the content card.

When you select one of the built-in cards, the fields that are available to be mapped from the content type are displayed. In the example shown below, the Summary-photo is selected and this supports headline, image and image-alt text.

To use the summary-photo card with the tutorial banner example enter "/headline" in the headline field and "/background" for the image to map the headline and banner properties from the banner to use in the card. When content of this type is shown in the content library, the background image will be displayed with the headline text underneath.

Adding the mapping for the card
Adding the mapping for the card

Built-in cards

The gallery card displays a piece of headline text, together with between 1 and 4 images. The images are arranged in a grid layout.

Mapped fields: headline, image0. Optionally image1, image2, image3 and imageAlt text for each image.

The example below shows an item created using the tutorial banner content type. We just have a single image and some headline text, so will enter /headline in the headline field of the card and /background for the image0 field. When tutorial banner content is displayed in the Content Library, its card will be shown with the background image and headline text underneath.

The gallery card with a single image
The gallery card with a single image

If you have linked content such as a carousel containing multiple carousel slides, you can map up to 4 carousel images to the gallery card. See the nested content for more information about how you map card fields to properties within nested content.

Photo

The Photo library card just shows a single image, centred on and filling the card.

Mapped fields: image

The photo card
The photo card

Summary-photo

The summary-photo card shows a single image and some text underneath it.

Mapped fields: image, headline

The summary-photo card
The summary-photo card

Text

The Text library card displays the headline text centred on the card rendered at 24 point. This card is useful in the cases where you want to identify a piece of content based on its text rather than images.

Mapped fields: headline

The text card
The text card

Using cards with nested content

You can configure the built-in cards to work with nested content, such as a carousel that contains one or more carousel slides.

You'll need to specify the mapping for each field using the JSON Pointer standard. This allows you to identify a specific value within JSON content, such as an image within an array.

In this example we're registering the carousel content type. In the carousel the "slides" property contains an array of carousel slides and each slide contains an "image" property. The gallery card can display up to 4 images in a grid, so we want to use the it to display the image of each of the slides. We specify "/slides/0/image" for image0 and so on up to image3.

The gallery card with multiple images
The gallery card with multiple images

Prerequisites

  • You must have a virtual staging environment specified in your settings in order to show visualizations for any content.
  • The current user's IP address must be in the whitelist of approved IP addresses in order for the card preview to be displayed

Creating custom cards

results matching ""

    No results matching ""