Object

Mosaic

The component for displaying a set of images as tiles in no particular order.

Properties

items
(Required)

An array of the images that will appear in the mosaic. The order used in the array may affect layout and positioning in the mosaic, depending on the device or width. Gallery items can be JPEG (with .jpg or .jpeg extension), PNG, or GIF images. If the GIF is animated, the animation plays only in full screen.

role
string
(Required)

Always mosaic for this component.

anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

behavior
*

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

conditional
*

An instance or array of component properties that can be applied conditionally, and the conditions that cause them to be applied.

hidden
boolean

A Boolean value that determines whether the component is hidden.

identifier
string

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout
*

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position will be based on various factors, such as the device type, the length of the content, and the role of this component.

style
*

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

Use the Mosaic component to display a group of images in no particular order. (To display a group of images in a particular order, use the Gallery component.) Users can tap an image in a mosaic to see a full-screen version.

Example

{ "components": [ { "role": "title", "text": "Article Title" }, { "role": "body", "format": "html", "text": "Apple News Format allows publishers to craft beautiful editorial layouts. Galleries, audio, video, and fun interactions like animation make stories spring to life." }, { "role": "mosaic", "items": [ { "URL": "bundle://mosaic-01.jpg", "caption": "A caption for the first image in the mosaic." }, { "URL": "bundle://mosaic-02.jpg", "caption": "A caption for the second image in the mosaic." }, { "URL": "bundle://mosaic-03.jpg", "caption": "A caption for the third image in the mosaic." }, { "URL": "bundle://mosaic-04.jpg", "caption": "A caption for the fourth image in the mosaic." }, { "URL": "bundle://mosaic-05.jpg", "caption": "A caption for the fifth image in the mosaic." } ] } ]}

Relationships

Inherits From

See Also

Galleries and Mosaics

object Gallery

The component for displaying a sequence of images in a specific order as a horizontal strip.

object GalleryItem

An object used in a gallery or mosaic component for displaying an individual image.