How Do I Wagtail?

How Do I Wagtail?

Streamfield Blocks

Where page types are set templates, wagtail streamfield blocks (hereafter known simply as ‘blocks’) are where you get to build and customize your page.

Glossary of available blocks:

  1. Airtable
  2. Blog Set
  3. Card Grid
  4. Iframe
  5. Image
  6. Image Grid
  7. Image Text
  8. Image Text Mini
  9. Linkbutton
  10. Paragraph
  11. Profile By Id
  12. Profile Listing
  13. Profile Directory
  14. Pulse Listing
  15. Quote
  16. Recent Blog Entries
  17. Spacer
  18. Typeform
  19. Video
  20. Datawrapper

Special Notes:

Article Page Types have a selection of blocks only available to them (see below). If these look like they might interest you please see Publications.

  • 2x Images
  • Callout
  • Table and Advanced Table
  • Wide Image

Blog Page Types have the following two blocks unique to them:


Airtable

The Airtable block allows you to embed a table (from Airtable) onto your page.

Live projects using this component:


Audio

*Note: The Audio stream field block is only available on Blog Page Types

The Audio block allows you to embed a sound clip onto your page.

Live projects using this component:

Audio block


Blog Set

The Blog set block allows you to pick and choose different blog posts to feature on your page via styled cards.

Live projects using this component:


Card grid

The Card grid block allows you to customize multiple cards with an image, text and link of your choice.

Live projects using this component:

Card Image 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.

Optional Link

Card Image 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.

Card Image 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis.


Iframe

Use the iframe block with caution. Sites will appear as 404 error until it is white listed and embedded iframes may not be the best solution for your need. Please reach out to the engineering team.

Live projects using this component:


Image

Use the Image block to insert a JPEG, PNG or WEBP onto your page. Maximum file size is 10MB and you can select your choice of image width: normal, wide or full width.

Live projects using this component:

Image of person looking at a phone


Image grid

The Image grid block allows images and captions to be uploaded in a row, up to four in a row. On mobile, the arrangement will change to up to two in a row.

Live projects using this component:

ADL.jpg
MIT.jpg
Consumers International
Algorithm Watch


Image text

The Image text block features an image on the left and a paragraph on the right, you can also choose to have top and bottom dividers. The image is also linkable.

Live projects using this component:

Example Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example link CTA.


Image text mini

The Image text mini block is similar to the Image text block but features a smaller image. It is commonly used for Call to Actions but can be remixed for whenever you want to use a smaller image (e.g. icons).

Live projects using this component:

Graphic of a camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros nibh, convallis quis erat nec, dictum rhoncus velit. Maecenas luctus lacus nec placerat lobortis. Example CTA.


Linkbutton

The Linkbutton block allows you to create your own button by customizing the text, URL and style (choose from primary or secondary).

Live projects using this component:


Paragraph

The Paragraph block allows you to enter rich text options. Examples:

Bold

Italicized

Large Body Text

Heading 2

Heading 3

Heading 4

Heading 5

Numbered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Bulleted List

  • Bullet One
  • Bullet Two
  • Bullet Three

Divider:


Link

Live projects using this component:

  • This page and this paragraph!


Profile by id

The Profile by id block allows you to show one or more specific Pulse profiles by their ID number.

  • To feature one profile enter the pulse ID number where the ‘##’ sign is: (mozillapulse.org/profile/[##]).
  • For multiple profiles, specify a comma separated list (e.g. 85,105,332).

Learn more about how to use the Profile by ID streamfield block.

Live projects using this component:

Abigail Cabunoc Mayes

Toronto, Canada

Leading Mozilla's developer-focused strategy around trustworthy AI and MozFest.

Peter Bihr

Berlin, Germany

Mozilla Fellow. Co-founder of ThingsCon, a non-profit advocating the creation of a responsible IoT.

Media Artist + Media Design Lecturer at the University of the Arts London + Digital Art Producer. Curator of Mozilla Artists Open Web.

Becca Ricks

Cambridge, MA

I'm a Researcher on Mozilla's Advocacy team.


Profile Listing

The Profile listing block is used to grab a group of profiles. For example, Tech Policy Fellows.

  • Max results - set the number to appear on your page.
  • Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
  • Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
  • Year - use this to limit your results to profile marked in Pulse Admin for a particular year. Used for fellow cohorts.

Learn more about how to use the Profile Listing streamfield block.

Stefania Koskova

Albania and Western Balkans

Mozilla Fellow working to develop collaborative solutions and effective policy responses to the threat of online radicalization

Chukwuyere Ebere Izuogu

Abuja, Nigeria

Mozilla Fellow. Conducting research on net neutrality and data protection regime in Nigeria. Senior Associate at Streamsowers & Kóhn.

Clara Tsao

Washington D.C., USA

Clara Tsao is a Mozilla Technology Policy Fellow researching the effectiveness of online tools to counter online disinformation.

Ayden Férdeline

Berlin, Germany

Ayden Férdeline is a Mozilla Tech Policy Fellow researching the ongoing development and harmonization of global privacy standards.


Profile Directory

Like the Profile listing block, the Profile Directory block allows you to grab a group of Pulse profiles. This block, however, lets you filter the profiles by year.

  • Max results - set the number to appear on your page.
  • Profile type - type is set in the Pulse admin. These include "fellow", "staff", etc. Leave this empty to pull any type.
  • Program type - programs are set in the Pulse admin. These include "tech policy" etc. Leave this empty to pull any type.
  • Year - use this to limit your results to profiles marked in Pulse Admin for a particular year. Used for fellow cohorts.
  • Filter values - use this to filter Pulse profiles by year

Learn more about how to use the Profile Directory streamfield block.

Live projects using this component:


Pulse listing

The Pulse listing block allows you to pull projects from Pulse onto your page. It allows you to search by keywords and then filter by issue etc. The admin has these options:

  • Search - Use any word or phrase. This will search titles, descriptions, and tags. Test your search on Pulse first.
  • Max results - set the number to appear on your page. This is limited so we don't overwhelm visitors. If you want to show more, link them to a search URL on Pulse. Pulse allows them to favorite things, view creators, and discover more.
  • Display featured - check this to limit your results to things marked as featured by our moderators on Pulse. Leave unchecked to show all results.
  • Sort - show the latest stuff by default
  • Issues - use this to limit your results to items with an issue
  • Help - use this to limit your results to projects that need a particular kind of help from collaborators

Learn more about how to use the Pulse Listing streamfield block.

Live projects using this component:


Quote

The Quote block allows you to add a stylized excerpt onto your page. You can enter the text and attribution.

Live projects using this component:

Of all the groups we work with regularly, very few have had the impact that our collaborations with Mozilla have had over the years…it’s absolutely a match made in heaven.

Jenny Toomey, Ford Foundation


Recent blog entries

The Recent blog entries block allows you to add blog post cards to your page via filters, either by tag or category. This is helpful if you want your cards to stay up-to-date without having to manually change them.

Live projects using this component:


Spacer

Is it feeling squishy on your page? Use the spacer block to create some breathing room between other blocks.

Live projects using this component:


Table

*Note: The Table stream field block is only available on Article Page Types

Use the Table block to add a table to your page.

Live projects using this component:

Screen shot of table block


Typeform

Use the Typeform block to add a button that links to your Typeform. Note that a page can only contain a single Typeform embed.

Learn how to use Typeform.

Live projects using this component:


Video

Use the video block to embed a video (linked from elsewhere, for example, YouTube) on your page.

Live projects using this component:


Datawrapper

Use the Datawrapper block to add an interactive chart.

Learn how to use Datawrapper.