Search

What's the best way to create flexible layouts with Contentful

I've seen many people ask about the best way to create flexible page layouts in Contentful. By the end of this article, you'll have more clarity on how to accomplish this.


Note: this article is geared towards people who will be coding a Contentful end experience themselves. If this isn't you, I have a piece on content modeling for modular pages for Contentful users who don't have a coding background.


Content Modeling

So you want to create a dynamic page for a website. You’ll likely want to have a page body on this dynamic page that can have as many variations of text and images as a content author wants.

Here’s an overview of how I would accomplish this:

  1. Navigate to your Content Model tab.

  2. Create a ✍️-text content type that has one single text field.

  3. Create a 🖼️-image content type that has one single media field.

  4. Create a 📜-page content type that has one multi-reference field.

  5. Navigate to your Content tab, and click Add Entry. Select the 📜-page component that you just created.

  6. Add new entries of 🖼️-image and ✍️-text to your 📜-page component inside of the reference field that you created.

Coding

Now that you have your content model for the flexible layout created and added some sample content to it, you’re ready to connect this to some code. Note: the following instructions assume you use React.js on your website and know how to use the Content Delivery API to query for the 📜-page component data.

After retrieving the data for the page from the Content Delivery API, you can then set up a would then set up a React component with a case and switch statement in it that reads the body fields from your 📜-page component.

Given that the Content Delivery API sends you an array of component data for the 📜-page component reference field (for the body field), you can map through that data to reflect the components on a page in that order.

genericPageBody.map((component, i) => {
 switch (component.__typename) {
  case ‘ContentfulComponentText’:
   return <Text data={component} key={i}></Text>
  case ‘ContentfulComponentImage:
   return <Image data={component} key={i}></Image>

Where <Text/> and <Image/> are smaller React components responsible for rendering the relative HTML you’d like to use to render the 🖼️-image and ✍️-text components.


If you'd like to expand on your modular content model, I've outlined a few more content types that are helpful for creating modular pages in Contentful here.


What if there was a process you could follow to make Contentful successful for your team specifically?


It's called the Waterfall method.


Teams I've worked with that follow this process were far more likely to set up a successful Contentful project than those who didn't.


Why? Because the process uses your current challenges to inform a vision their entire team can work towards, and make Contentful the tool to pull it all together.