Skip to main content

How To Use Link Lists Content Element in Composer

The link lists content element lets you curate a group of links, place them in your story, and indicate which presentations to apply.

Technical Notes

You can use a link list to represent links to external sources or other articles. Unlike the related_content trait, you can position link lists within the document, floated to the left or right, and they can contain links to external websites or non-ANS content and can have a distinct title. A link list consists of a series of the newly enhanced interstitial links and a title.

  • A plain-text reader-facing title (optional)

  • A subtype to differentiate which styling option should be applied to the list. It will be an enumerated-list configured on a per-organization basis.

Each link list element can have up to 10 items, each of which has the following elements:

  • A subtype to differentiate which styling option should be applied to the link. It will be an enumerated-list configured on a per-organization basis.

  • A plain-text title (required)

  • A link (required)

  • A description, which will be an ANS text element. Thus it can contain rich text formatting

  • An image (ANS image or reference to an image)

Link lists are applicable to only stories.

Example

{
  "_id": "ABC",
  "type": "link_list",
  "subtype": "more-information",
  "alignment": "right",

  "title": "Learn More",
  "items": [
    {
      "_id": "DEF",
      "type": "interstitial_link",
      "subtype": "highlight",
      "url": "https://www.washingtonpost.com/politics/can-clinton-and-trump-ride-to-big-victories-in-next-weeks-acela-primary/2016/04/20/ea6454fc-064e-11e6-bdcb-0133da18418d_story.html?hpid=hp_rhp-top-table-main_5states-1025a%3Ahomepage%2Fstory",
      "content": "Can Clinton and Trump ride to big victories in next weeks Acela primary?",
      "description": {
        "type": "text",
        "content": "<em>Emboldened</em> by dominant victories in <strong>New York</strong>, Hillary Clinton and Donald Trump plunged swiftly Wednesday into the next batch of primaries in five states along the Northeast Corridor, where they hope to bury or break their challengers for the Democratic and Republican presidential nominations."
      },
      "image": {
        "type": "reference",
        "referent": {
          "type": "image",
          "id": "AAAAAFGHIJKLMNOPQRSTUVWXYZ",
          "provider": ""
        }
      }
    },

    {
      "_id": "GHI",
      "type": "interstitial_link",
      "subtype": "skinny",

      "url": "https://www.washingtonpost.com",
      "content": "See more from The Washington Post"
    }
  ]
}

See schema: https://github.com/washingtonpost/ans-schema/blob/master/src/main/resources/schema/ans/0.10.0/story_elements/link_list.json

Workflow

Here is an example of what you might build if you floated a link list to the right.

comp_link_list_rendered_in_article.png

And here is what it might look like to edit the previous link list in Composer. Readers see a link list title of “More Coverage” and links such as one with a description instead of an image. The subtype for the whole link list lets rendering apps know to style the link in the “more_news” style. Rendering apps use the “breaking_news” and “exclusive” subtypes to add a “breaking news” or “exclusive” label to the links with those subtypes.

comp_edit_link_list.png

FAQs

How should the link lists element be used?

The following would be permitted:

  • Build a list of related links to appear in an arbitrary spot in the story...

  • For which some links have images and others don't

  • For which the description has rich text formatting like hyperlinks

  • For which the links each have their own subtype, so users could add kickers/labels

  • For which the links can be internal/external

The following would not be permitted:

  • Use links lists as the main piece of content for a story. This element is meant for supplemental information in the story, not the main information.

  • Adding a description for the whole list

  • Selecting an image through a means other than Photo Center. Images must be selected from Photo Center.

  • Using a video, gallery, or HTML as the visual for the link

What if I want to add a kicker or label to a link?

Users can specify a label through a link subtype, which is a pick list the organization configures in Composer settings. For example, you could create a subtype to add an “exclusive” label or “breaking” label.

Are Link Lists supported by Themes Article body chain?

No, Themes out-of-the-box Article body chain does not support Link Lists, and you would need to create a custom block. Use this page to get started.