Skip to content

Teaser data for FT.com

Jump to bottom
Matt Hinchliffe edited this page Mar 6, 2018 · 19 revisions

Data for FT.com apps may be sourced from Elasticsearch or GraphQL (also Elasticsearch, but with a couple of extras).

Content teasers

Teasers for content items inc. articles, podcasts, placeholders, videos, and paid/promoted content.

interface ContentTeaser {
    type: 'article' | 'video' | 'podcast' | 'package',

    // Contents
    id: string,
    relativeUrl: string,
    title: string,
    alternativeTitles: {
        promotionalTitle?: string,
        promotionalTitleVariant?: string
    }
    standfirst?: string
    publishedDate: string, // ISO8601
    firstPublishedDate: string, // ISO8601
    mainImage?: {
        url: string,
        width: number, // int
        height: number, // int
        aspectRatio: number // float
    },

    // Concepts
    displayConcept: {
        relativeUrl: string,
        prefLabel: string
    },
    genreConcept?: {
        relativeUrl: string,
        prefLabel: string
    },
    brandConcept?: {
        relativeUrl: string,
        prefLabel: string
    },
    authorConcepts?: Array<{
        relativeUrl: string,
        prefLabel: string
    }>,

    // Flags
    isPremium: boolean, // Next API only (accessLevel == premium)
    isOpinion: boolean, // Next API only (genreConcept == opinion)
    isEditorsChoice: boolean, // Next API only (standout.editorsChoice == true)
    canBeSyndicated: 'yes' | 'no' | 'verify',
    realtime: 'inprogress' | 'comingsoon' | 'closed' // must also check URL (blogs.ft.com) to be "live"
}

Notes:

  • We use relative URLs on FT.com, i.e. no protocol or domain
  • Promotional title should be used in favour of the title field as it is shorter
  • Published date and first published date properties are used to indicate New or Updated status
  • The date is usually hidden unless the content is New or Updated (< 4 hours old) but there are exceptions
  • Brand concept may be used as a concept prefix, e.g. Fast FT or Inside Business
  • Genre concept may be used as a concept prefix, e.g. Opinion or Analysis or Special Report (genres allowed as prefixes in a hard-coded whitelist)
  • Video content will always be prepended with a Video prefix
  • Paid/promoted content will always be prepended with a Promoted by prefix
  • Premium flag is used to append a premium label to the title
  • Opinion flag is used to apply a blue theme to teasers and display an author headshot if available (essentially genreConcept == opinion?)
  • Editors choice flag applies a theme to "hero" teasers (we have no treatments for exclusive or scoop)
  • Video teasers may append the media duration in 00:00

Content Teaser A/B tests

Content may have a alternativeTitles.promotionalTitleVariant. When a user is within the test cohort they should be shown this title instead of the usual title. There may also be alternative standfirsts in future.

Package teasers

Teasers for editorially curated collections or connected series of content.

interface PackageTeaser extends ContentTeaser {
    contains: Array<{
        relativeUrl: string,
        title: string,
        promotionalTitle: string
    }>,
    design: {
        theme: 'basic' | 'special-report' | 'extra' | 'extra-wide'
    }
}

Packages are covered in more detail in the Next Article app wiki.

NOTES:

  • Will be "live" if first content item contained within is "live"
  • Also subject to headline A/B testing

Top Story teasers

Teasers for presenting headline stories.

interface TopStoryTeaser extends ContentTeaser {
    curatedRelatedContent?: Array<{
        type: string,
        relativeUrl: string,
        title: string,
        promotionalTitle: string
    }>
}

NOTES:

  • If no curated related content exists then the latest stories for the displayConcept should be fetched

Layouts and themes

Shared markup and templates

  • Extra light
  • Light
  • Standard
  • Lifestyle
  • Stacked

Templates with related content

  • Top story standard
  • Top story heavy

Teasers which support in-situ videos

  • Heavy
  • Top story heavy

Totally separate

Docs

Get Started

Components in-depth

Integrating x-dash

Guides

Components

Packages

More

Clone this wiki locally