Object

CollectionDisplay

An object used in any container component type to define how the collection of child components is presented.

Properties

type
string
(Required)

Always collection for this object.

alignment
string

A string that defines how components are aligned within their rows. This is especially visible when distribution is set to narrow.

Valid values:

  • left (default). The group of components is left-aligned within the available space. Remaining space is added at the right of the row.

  • center. The group of components is centered within the available space. Remaining space is added at both sides of the row.

  • right. The group of components is right-aligned within the available space. Remaining space is added at the left of the row.

distribution
string

A string that defines how components should be distributed horizontally in a row.

Valid values:

  • wide (default). Components are spread across the full width of the component. Whitespace is equally distributed into the space between components.

  • narrow. Components are placed next to each other as closely as possible, separated by the width defined in the gutter property. Any remaining whitespace is applied to the left and right of the collection.

gutter
*

A number in points or a string referring to a supported unit of measure defining the vertical gutter between components.

See Specifying Measurements for Components.

This value cannot be negative.

maximumWidth
*

A number in points or a string referring to a supported unit of measure defining the maximum width of each child component inside the collection.

If the maximumWidth is smaller than the minimumWidth, the minimumWidth is used.

If no maximumWidth is provided, a default of 100cw is used.

See Specifying Measurements for Components.

minimumWidth
*

A number in points or a string referring to a supported unit of measure defining the minimum width of each child component inside the collection.

minimumWidth should not exceed the maximumWidth value. A child component will never be larger than the width of its parent. If no minimumWidth has been provided, News attempts to decide the optimal size for each child component based on its contents. See Specifying Measurements for Components.

This value cannot be negative.

rowSpacing
*

A number in points or a string referring to a supported unit of measure defining the horizontal spacing between rows. See Specifying Measurements for Components.

This value cannot be negative.

variableSizing
boolean

A Boolean value that defines whether the components’ area is allowed to be sized differently per row.

If true, individual rows might have different widths for their components to make use of the entire available width.

If false, all components in the collection will have the same width.

widows
string

A string that defines the approach to prevent the collection from having component widows.

Valid values:

  • equalize. Every row contains an equal amount of components. When provided with an uneven amount of components, each row consists of 1 component.

  • optimize (default). Looks for the most optimal distribution of components, but allows each row to have a different amount of components.

Discussion

This image shows a CollectionDisplay with a distribution property of wide.

This image shows a CollectionDisplay with a distribution property of narrow.

This object can be used in Header, Container, Section, Chapter, Aside, and ArticleLink.

Example

{ "components": [ { "role": "container", "contentDisplay": { "type": "collection", "minimumWidth": 150, "gutter": "15", "rowSpacing": "30", "distribution": "wide" }, "components": [ { "role": "image", "URL": "bundle://gallery-02.jpg", "caption": "Coyotes are also seen in cities more often." }, { "role": "image", "URL": "bundle://gallery-03.jpg", "explicitContent": true } ] } ]}

See Also

Article Structure

Nesting Components in an Article

Use container components to create the component hierarchies you need for special article designs.

Adding a Scene to a Chapter or a Section Header

Add a scene to your article to create special effects.

Creating an Article Link

Link to an article by using the article-linking container component.

Displaying Components Side By Side

Configure a side-by-side, horizontal arrangement of components for your article.

object Header

The component for defining the top area of an article, chapter, or section.

object Container

Properties shared by all container types.

object Section

The component for organizing an article into sections.

object Chapter

The component for organizing an article into chapters.

object Aside

The component for setting apart content that is not directly related to the article, such as promotional content.

object HorizontalStackDisplay

The object for displaying components side by side in a Container component.

object FlexibleSpacer

The component for redistributing empty space inside a horizontal stack collection.

object Divider

The component for defining a horizontal line to visually divide parts of your article.

object ArticleLink

The container component for creating a link to an article.

type SupportedArticleIdentifier

The patterns supported for article identifiers in UUID format.

object ArticleTitle

The component for displaying an article title in the ArticleLink component.

object ArticleThumbnail

The component for displaying a thumbnail image with an article link.

object LinkButton

The component for opening a link in a button.