How to Create Composable Content in Drupal

Learn how to design a composable content architecture in Drupal and create individual Drupal components that can then be reused again and again.

The need to provide digital content on a variety of platforms and formats means that an organization must design their content model in a more modular fashion. Gone are the days when a site builder could create a website with a couple of simple content types placed in a single field. IT teams must instead embrace a composable content strategy that allows them to create site components that are both structured and flexible. 

With the explosion of digital channels and the demand for more content at every touch point, developers require the ability to rapidly assemble content that is shareable and reusable across any format. Drupal’s open content framework provides a variety of ways to model your content to provide a unified digital experience across multiple platforms, devices and channels. 

However, before you can reap the powerful business value from Drupal, you need to know how to design a composable content architecture and create individual Drupal components that can then be reused again and again and automates much of the work to maintain your sites so you can build more efficiently and improve your overall development workflow. 

Building Components in Drupal 

Many monolithic CMS platforms leverage entire web pages as their building blocks and organize these pages within a hierarchical library of different folders. However, Drupal breaks down the basic page even further into smaller units or entities which can be applied in many diverse ways. This more modular approach to content management allows users to reuse the same component across multiple platforms.

Drupal provides multiple types of “entities,” which can be used to compose content. The first is a “node,” which has traditionally been understood to represent a single page on a website. The node may contain references to other entities (for instance, media such as images, documents or videos) in addition to fields, which are used to store specific types of data (e.g., a link, telephone number, email address, etc). In a modular content model, nodes do not need to be equated to pages — nodes can be used to represent a piece of content, such as a product or a recipe.

Media entities represent a single type of media — images, documents (PDFs), videos (generally hosted externally), or other types of embedded media, such as a social media feed. These kinds of content entities are more suitable to reuse in multiple places, but are limited in the type of content they can contain.

Custom content block entities are the most flexible type of content entity that Drupal provides. They can be reused across multiple platforms and devices, can be leveraged as part of a low-code solution like Acquia Site Studio and can be made available to decoupled applications via an API, such as JSON:API.

Reusing Drupal Components on Multiple Platforms

Consider an organization that has a website available on both desktop and mobile devices and a mobile application that also needs to display certain content pieces from the website with a different UI. With Drupal, content managers can create this content once and reuse it across all of these unique platforms and devices. Let’s look at an example of how this can be done in Drupal.    

You can create a simple CTA card component with a custom block containing fields like the following:

  • Banner image (reference to an image media item)
  • Title (text field)
  • Description (formatted text that allows a limited amount of markup)
  • Action link (link field)
    Drupal content block

Cards of this type can be used together on landing pages on the desktop and mobile platform to create pages, which can be decomposed depending on the device accessing the content. An application can consume only the blocks it needs, independent of where they may be used on other platforms.

If you are designing a site that also needs to support a native application, you can use a combination of different types of content entities to provide the content to the app. Using a decoupled approach with content exposed via an API like JSON:API or GraphQL is most successful when your content is structured so that you can request just the pieces you need.

For example, a hotel chain may provide a desktop/mobile traditional site that allows a user to find and reserve a room and view details about the hotel and the area. They may also provide an application that the user can use to manage their reservation and find information about the amenities provided by the hotel where they are staying. The hotel also provides a digital kiosk where a user can check in or out in the lobby.

We will make the assumption that Drupal has an integration with the back-end reservation system and a method for associating a user’s reservation with the hotel display content, which exists on the Drupal site.

At a high level, a content model to support an application of this type could include a structured entity for each of the following:

  • Users (email, password, contact information, membership info)
  • Room types (number/type of beds, amenities)
  • Hotels (description, address, contact info, geo location data, reference to room types at this hotel)
  • Location-specific content (current weather block, local events/attractions, etc.)

The application would request any upcoming reservations for the user, and then request other content based upon that reservation. For example, a current weather block would use the location information from the hotel to display the weather at the hotel’s location. Structuring the content in small self-contained components allows the application to only request the specific content items it needs and can request only the fields for each content entity that are relevant. 

Drupal grants developers a higher degree of freedom and functionality to deploy digital experiences across multiple platforms and devices while keeping all of their data and content accessible in a centralized location. The ability to decompose experiences within Drupal into atomic, modular pieces of content allows for a more efficient editorial experience. Unlike the restrictive platforms that tie content to specific presentations, Drupal’s open, composable architecture provides the fundamental building blocks to deliver the next best experience in any context.    

Featured Resources

View More Resources