Falcon wrapper pages

Wrapper pages are regular (Falcon-style) FT pages – but with no content, only FT navigation and page furniture. We inject our own content into them before serving them to the user.

Here's an example of a simple wrapper page. Here's one with a right rail (the right rail content appears to be on the left, but it will be pushed to the right when content is injected into it.)

Notice that each one is set up with a particular breadcrumb trail and highlighted navigation to give the impression that the page is in the normal CMS. In reality, it's a fake page that is not linked from anywhere.

How do we inject our content?

It's just a matter of manipulating a string of HTML, and it happens server-side.

Here's an example:

This Paris timeline page is served from our IG server. But instead of index.html, the main file is an index.php script. This script loads the "World > Europe" wrapper and injects our own content into it. Then it outputs the result.

Wrapper pages are useful for when we want to do layout/scroll-related things, like sticky in-page navigation, but using the classic FT.com layout. But eventually wrappers will be obsolete when the FT switches over to Next.

Live examples

The vast majority of our wrapper pages have been used for timeline stories. These have a 'sticky timeline' component that reacts to page scrolling.

With a right rail:

Full width:

How to make one

The basic process is:

  1. Get a wrapper set up by Mus, or choose one that already exists (see below). You can always use an existing one during development and switch it out later.
  2. Set up something on the server that will download your wrapper page and dynamically inject your own content into it. You probably want your main content to go in .editorialSection .freestyle[data-comp-index=0]. You may also want to inject scripts/styles into the wrapper's <head>. And definitely inject something into the wrappers <title> element.

Injecting using PHP

This index.php is used for most of our timelines:

<?php
require 'CENSORED/wrapper-page-injector.php'; // check an example timeline on the FTP server for the real path!

print injectContentIntoWrapper(
  file_get_contents('content.html'),
  'http://www.ft.com/thirdpartywrapper/worldeurope'
);
  • content.html is your own web application (without any FT header/nav/footer etc).
  • The injectContentIntoWrapper will load the given wrapper URL. Then it will select key pieces of your content page, and copy them over to the correct locations in the wrapper page HTML:
    • it copies the <title> from the content page to the wrapper page
    • it takes any scripts and stylesheets in the content page's <head> and injects them into the wrapper page's <head>
    • it takes the entire inner HTML of <body> from the content page, and injects it into .editorialSection .freestyle[data-comp-index=0] in the wrapper page.

Injecting using Node

This hasn't been written yet

Available wrappers

You can reuse any of these. Ignore the naming in the wrapper URLs – many have been given overly specific codenames relating to the articles they were first created for, but all that really matters is which navigation path is highlighted (as this is visible in the main nav and the breadcrumbs) and whether you want to do a full-width or narrow story.

If none of these suit you, request a new one.