Publications and Articles are page types that are ideal for long-form content publishing (for short-form please use Blog or Default pages). If there was content you’d previously used a .pdf or .doc for sharing, you can now use our template in wagtail that is suitable to accommodate long texts on the web.
Our research reports live in our Research Hub.
If you're creating a report, here's a checklist you can reference before launching!
What's the difference between the two?
Publication pages are the landing page of your content that helps structure your content. It may include the title, subtitles, date, author and table of contents. You are able to add additional publisher notes after the table of contents and if you have a .pdf version you want downloadable you can upload it here too. Publication pages may have either publication pages or article pages as child pages and these will show up in the table of contents.
Article pages are the core content pages that house the content itself that you want published. It may contain a title, author, content and footnotes. You are able to add various copy and images formats and simple callouts and tables with the streamfield components. These pages are options within publication page types only.
Find examples of live Publications and Articles on the Page Types page!
How can I use it?
If you have permissions to add a child page, click the button and you will find the 'Publication page' or 'Article page' type listed as an option. Currently, all pages of the site except Blogs can add Publication and Article page types as child pages.
Table of Contents
The Table of Contents shows the child publication/article pages within a publication. You can choose a 'Table of Content Thumbnail' image from the child page if you wish to add one or by default it will be a blue square. You are able to ‘sort’ pages in wagtail if you want to rearrange content in the Table of Contents.
Article Pages with section headers appear with an accordion icon. Clicking the accordion icon reveals the section headers.
Child Publications show up with an arrow right icon. Clicking the arrow right icon reveals the child Publication’s contents.
Navigation
The Table of Contents’ structure is repeated in a sticky navigation menu available at the top of both Publications and Articles. All publications also have ‘continuous scrolling’ in effect where users can scroll seamlessly from one child article to the next.
Hero Header
The hero header has a variety of ways for you to create a unique landing page for your publication. The variations are as follows:
- Layout: Full Screen, Image Left and Image Right
- Media Choice: Graphic or Video (instructions here)
- Hero Text and Background Color: Select your own background color using a color picker and Hero Text choice of black or white. Just make sure your combination passes WebAim’s accessibility test.
- Button Choice and Custom Icon: If you choose to have a PDF download button you can now decide which style of button you’d like between Primary, Secondary and Tertiary. You can customize it further by uploading an icon of your choice from feathericons.com
A note on PDF Downloads: Please use this template (by making a copy of it) when creating your PDF.
Summary
Article pages have an auto summary feature that helps users navigate through lengthy sections with summary anchor links at the top of the document or in the navigation drop down menu. This is generated when h2 is used in the (body > content > h2) so it is recommended to use h2 to distinguish broad sections you want summary anchor links too.
Images in Content
You can format images in four ways:
Within the Content block, you can format your image full width, left-aligned or right-aligned.
Wide Images
There is a Wide Image block where you can have images span the full width of the page.
2X Images
There is a 2X Image block where you can have two image side by side with optional captions.
Callout
Simple sections of text with a light grey background to highlight desired content.
Tables
There is a basic table block feature with rows and columns. You can add additional rows and columns by right clicking on a table cell within the component. Currently, there is no rich text styling available for this.
Datawrapper
For more complex tables and other data visualizations use our Datawrapper block!
Footnotes
Enter in your footnotes in the fields first at the bottom of the page. Go into your body content where you want to include your footnote and select Fn and select your footnote. Footnotes will be numbered starting from 1 according to the page.
Publishing Tips
Phase 1: Gather & Plan
- Gather your content. Get the latest document you want to publish. Having original documents like a word or google doc (not a .pdf) will make copy/pasting easier, .pdf have line breaks and invisible characters or styling that transfers in a strange format.
- You can also upload the latest file in the CMS on the publication page so it is downloadable.
- Determine publication location. Where is your publication going to live on the Foundation site? What will be its URL?
- Get authoring permissions to add publication pages in wagtail.
- Make a plan. Consider the desired pacing of content for users and map out the structure you want for your content.
- For example, decide if sections are large enough to need another publication page or if an article page with h2 or wide images are enough to break up the content.
Phase 2: Import and Edit
Copy/Paste to import content and use block features to structure and style your content.
Consider what blocks you want to use for your content (see above). Things to consider:
- Interactivity: what can you add to your report to encourage engagement from your readers? (e.g. You can use a Datawrapper block to add an interactive data visualization to your report)
- Length of report: Is your report getting too long? Consider using Accordions for non-essential content (i.e. anything that can fall under “read more”) or a Slider to condense visuals.
- Imagery: This is a good time to brainstorm what visual pieces you want to include in your report. If you’re working with a contractor, include them in the process as you plan out how you want your report to look and what pieces you will need them to create.
Phase 3: Review
- Gather Feedback. Save draft and review throughout the importing process. Share with your team (and the design team!) and ask for feedback.
- Design review: If you’re struggling with design elements or just want a general design review, let the design team know in our slack channel #mofo-design and we will be happy to help!
For additional examples, look for the links under Article and Publication and our Page Types page.
Need additional help?
Join our slack channel #mofo-wagtail & mention @channel for help!