CreativeTech Wiki (internal)

Explore

Paid Posts

Paid Post Basics

A paid post build is a static web page embedded in the NYT sponsored content wrapper. These are some basic info to understand better its specificities.

Process

This is the top-line process of the paid posts production:

The team creates a static web page with Webflow or a custom build system. The output should be a index.html file with all the needed assets referenced relatively to it.

The output is wrapped in a zip archive, with the index.html at its root, not in a subfolder.

The zip archive is uploaded on

Scoop⁠

, in a new paid post entry.

After the upload the

Paid Post Translator⁠

workflow will process and store the assets in a cloud bucket.

The page will be appropriately rendered in a specific wrapper on the sponsored page.

Bundle

The zip payload uploaded on Scoop must follow the

these criteria⁠

An index.html file exists within base of payload zip (not within a folder)

If index.html has assets referenced, assets are stored in the appropriate folders relative to the index.html file.

the index.html file contains the following:

an html fragment as is expected to be inserted within the paidpost <article> element

assets are included within zip payload and are referenced within html with relative pathing

all css is targeted correctly within article or #story

Based on the projects requirements, we are free to work with the stack we prefer, as long as we produce a similar bundle that doesn’t error, is semantically correct and doesn’t leak styles in the website wrapper.

Fastly

Assets uploaded to the cloud bucket are served via Fastly CDN.

More info to come about parameters and

available sizes⁠

To Do: discuss if it’s worth asking for different sizes, especially tied to devices standard (480, 640, 768, 1024, 1280, 1440, 1920...)

Markup

The paid post bundle gets rendered in the NYT wrapper and should have a semantically correct markup. You could use the following structure as a guidance.

<body>

</header>

</header>

<!--

👉 From here, we have control on the markup

-->

<!--

Article header goes here,

with a mandatory H1

and an optional content lead

-->

<h1>Article Title</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

</header>

<!--

Article content goes here,

with the preferred sectioning (DIVs, Sections, nested articles...)

and hierarchical heading structure.

It could include a NAV element for in-page navigation

-->

<h2>Secondary Heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<div>

<h3>Tertiary Heading</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

</div>

</section>

<h2>Secondary Heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

</section>

<!--

Article footer goes here,

with branding, messaging and outbound link

and an optional content lead

-->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

<a href="" target="_blank" rel="noreferrer"

>Learn More (or even better, a Meaningful Label)</a

</footer>

</div>

<!--

👉 To here, we have control on the markup

-->

</article>

</main>

</footer>

</body>

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.