Adding Content

Updating chunks via the Content Hub:

Chunks can be updated via the Content Hub by searching for their unique content key and replacing the placeholder content, as required:

Below is a table of some of the most important chunks, along with their description and content key, to get you up and running with locating & replacing the placeholder content with that of your own:

Updating chunks inline via the Magic Editor:

  • Enable inline editing from within the browser by either adding ?editmode=true as a query string parameter on the url or using the relevant keyboard shortcut. On mac that's: CMD, Shift, E, on windows its CTRL, Shift, E.

  • Select the content you would like to replace and begin typing. Images can be changed by either clicking the placeholder image and selecting the desired file from your desktop, or by dragging and dropping the desired file onto the dropzone (shown below).

  • Click the Save button on the Editmode toolbar and voila!

Some chunks cannot be edited inline. For example, the default meta title for each page must be replaced via the Content Hub.

These kinds of chunks use the useGetChunk() syntax within the codebase, as opposed to the regular <Chunk identifier="foo"/> syntax for inline editable content.

Below is a table containing all of the most important examples, along with a description and content key, that can be used to locate them via the Content Hub.

Working with collection items:

A very common use case when displaying content is to have a list of resources which have the same attributes. An example of this is the "Meet The Team" page, which displays each employee's name, bio, headshot, and social links. We call this repeatable content.

Collections are what allows us to define and display repeatable content. A collection is simply a "Group" of chunks with the same fields. For example, each item in the "Team Members" collection has the fields Name, Bio, Twitter URL, Facebook URL, LinkedIn URL and Headshot.

Fields can hold different types of information. For example, the Name field above holds text, whereas the Headshot field holds an image.

Editing/adding a new collection item via the Magic Editor:

Via the Content Hub:

Pre-populated Collections

Last updated