Contents

PageImage

Associates an image with a page.

Declaration

@PageImage(purpose: Purpose, source: ResourceReference, alt: String?)

Parameters

  • purpose:

    The image’s purpose. (required)

    icon

    The image will be used when representing the page as an icon, such as in the navigation sidebar.

    card

    The image will be used when representing the page as a card, such as in grid styled Topics sections.

  • source:

    The base file name of an image in your documentation catalog. (required)

  • alt:

    Alternative text that describes the image to screen readers. (optional)

Mentioned in

Overview

You can use this directive to set the image used when rendering a user-interface element representing the page.

Use the “icon” purpose to customize the icon that DocC uses to represent this page in the navigation sidebar. For article pages, DocC also uses this icon to represent the article in topics sections and in Links directives that use the list visual style.

Use the “card” purpose to customize the image that DocC uses to represent this page inside Links directives that use the either the detailedGrid or the compactGrid visual style. For article pages, DocC also incorporates a partially faded out version of the card image in the background of the page itself.

If you specify an “icon” page image without specifying a “card” page image, DocC will use the icon as a fallback in places where the card image is preferred. To avoid upscaled pixelated icons in these places, either configure a “card” page image as well or use a scalable vector image asset for the “icon” page image.

See Also

Customizing the Presentation of a Page