Skip to main content

How to Set Featured Media in Composer

Featured media is the promotional media (images, galleries, videos, HTML, or custom embeds) that you use to promote your story throughout the Arc XP platform. For example, you might have promo art that's frequently used for your homepage and section fronts, social media and search, Apple News, or at the top of your article pages.

Composer also offers broad configuration so you can control what content types (images, galleries, videos, HTML or custom embeds) Composer users can use and the ability to set arbitrary keys for where these are posted to in ANS.

To add featured media, see Defining featured media.

How to Determine Which Featured Media Keys and Types You Need

The high level question to ask yourself is which types and keys do you want to support in Composer? For the sake of migration, you could have different (legacy) types and keys in the adapter. So which keys and types do you want users to add in Composer?

  • Where is featured media used by the front-end? For example, perhaps you use featured media on your homepage and section fronts, one kind that always appears in a certain spot on your article pages, one kind that is specifically for Apple News, etc.

  • Each featured media option you configure uses the same promo art. You must specify two things for each option.

  • What arbitrary key do you want to use in promo_art? For example, if “basic” is the key, then featured media would post to “promo_items.basic” in ANS, and 2. Which types (images, galleries, videos, or HTML) can Composer users add for this key? You want to limit which types are shown based on front-end requirements; for example, not all distributed platforms will accept HTML as a type.

For example, say you want to configure video and HTML as lead art:

  • The allowed types would be video and HTML

  • The key would be “lead_art”

  • They would be represented in ANS under “promo_items.lead_art”

The featured media keys are arbitrary values. However, “basic” is offered by default in Composer, and we recommend using “basic” as the promo art for homepage and section fronts and “lead_art” as the lead art for a story, meaning the promo art that typically appears at the top of an article page. These are the two media keys recommended for and supported by Themes. For configuration guidance, see Featured Media.

Adapters and front-end logic also need to be modified to match these keys so the front end knows to read from your configured keys in promo items.

How to Configure Featured Media Keys and Types

In your Composer Settings page, go to the “Featured media” panel to configure the keys and the content types offered as featured media. To add a new featured media option, select a type, enter a key, then click “add option.” You can then enable an option to be required for publishing or delete an option entirely. The “basic” option is required though because it is needed as a fallback.

Featured Media configuration consists of a list of arbitrary keys such as “basic,” “bright,” “lead_art,” and “promo_art.” Those keys are used to build the media key drop-down list you see on the Featured Media tab.

Each key has a list of allowed types in a types array. For instance, “basic” key can contain “video,” “image,” and “raw_html” but the “lead_art” key can contain only “image” and “raw_html." A distinct set of types are used to build the media type drop-down on the Featured Media tab.

Here is an example settings configuration structure for the Featured Media:

featuredMedia: {
    basic: {
        types: ['video', 'image', 'raw_html'],
        label: 'Basic'
    },
    lead_art: {
        types: ['image', 'raw_html'],
        label: 'Lead Art'
    },
    promo_art: {
        types: ['video', 'image', 'raw_html', 'gallery'],
        label: 'Promo Art'
    },
    bright: {
        types: ['image', 'gallery', 'raw_html'],
        label: 'Bright'
    },
    custom_gallery: {
        types: ['gallery'],
        label: 'Gallery'
    },
    html_key: {
        types: ['raw_html'],
        label: 'HTML Content'
    }
}
In this section: