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.
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.
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.
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:
The basic process is:
.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
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.htmlis your own web application (without any FT header/nav/footer etc).
injectContentIntoWrapperwill 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:
<title>from the content page to the wrapper page
<head>and injects them into the wrapper page's
<body>from the content page, and injects it into
.editorialSection .freestyle[data-comp-index=0]in the wrapper page.
This hasn't been written yet
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.