Object

ArticleThumbnail

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

Properties

role
string
(Required)

Always article_thumbnail for this component.

accessibilityCaption
string

A caption that describes the image. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used instead.

additions

Ignored for all children of ArticleLink.

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.

aspectRatio
float

The aspect ratio of the component in which the article thumbnail is displayed.

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.

caption
*

A caption that describes the image. The text is seen when the image is in full screen. This text is also used by VoiceOver for iOS and VoiceOver for macOS, if accessibilityCaption text is not provided. The caption text does not appear in the main article view. To display a caption in the main article view, use the Caption component.

conditional
*

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

explicitContent
boolean

A Boolean that indicates that the image may contain explicit content.

fillMode
string

A string that indicates how to display the image fill.

Valid values:

  • cover (default). Scales the image by aspect ratio to completely fill the component.

  • fit. Scales the image by aspect ratio to fit the component.

hidden
boolean

A Boolean that indicates whether the component is hidden.

horizontalAlignment
string

A string that sets the horizontal alignment of the image fill within its component.

Valid values:

  • left. Aligns the left edge of the fill with the left edge of the component.

  • center (default). Aligns the horizontal center of the fill with the center of the component.

  • right. Aligns the right edge of the fill with the right edge of the component.

You can use fillMode with horizontalAlignment to achieve the effect you want. For example, set fillMode to fit and horizontalAlignment to left to fit the image based on its aspect ratio and align the left edge of the fill with the left edge of the component. Or set fillMode to cover and horizontalAlignment to right to scale the image horizontally and align the right edge of the fill with the right edge of the component.

identifier
string

A unique identifier for this component. If used, the identifier must be unique across the entire document. An identifier is required if you want to anchor other components to this component. See Anchor.

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 are 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.

URL
uri

The URL of an image file.

If omitted, the thumbnail of the article referenced in the ArticleLink component is used. Images should be high-resolution so they can be smoothly scaled down.

Image URLs can begin with http://, https://, or bundle://. If the image URL begins with bundle://, the image file must be in the same directory as the document.

Image filenames should be properly encoded as URLs. For example, spaces in a URL should be encoded as %20.

See Guidelines for Using Images, Videos, and Audio Files.

verticalAlignment
string

A string that defines the vertical alignment of the article thumbnail within the component.

Discussion

Use the ArticleThumbnail object to display the thumbnail of an article. This component is used inside an ArticleLink component. The value of the URL property is automatically populated to reference the thumbnail image associated with the article (using the articleIdentifier property of the ArticleLink component). To provide a custom thumbnail, use another component, such as Image.

Example

{ "components": [ { "role": "article_link", "articleIdentifier": "https://apple.news/AT6kNQslCQy6EE4bF8hpOoQ", "components": [ { "role": "article_thumbnail", "aspectRatio": 1, "fillMode": "cover", "verticalAlignment": "top" }, { "role": "article_title" } ] } ]}

Relationships

Inherits From

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 CollectionDisplay

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

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.

object ArticleTitle

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