CERN Accelerating science

Close menu
CERN Components

Useful Info


The CERN Components module provides a set of patterns, which constitute out-of-the box layouts in order to render to content in specific ways.

Package Maintainers:
The CERN Web Team

Documentation

In this article we will present how use the CERN patterns, a useful tool to render content types in a specific way.

What is a pattern?

The CERN Drupal 8 theme comes with a set of re-usable patterns. A pattern is a pre-designed template that is used in order to render your content in a specific way. The patterns, along with the theme, help to keep the same look and feel in the CERN websites. There is no better way to understand what a pattern is by giving a simple example from the home website.

 

pattern example

 

The example above is used in the widely used boxes in our new home website. The pattern consists of the following pattern fields:

  • Title
  • Category
  • News Format
  • Date
  • Background Image

 

How to enable the CERN patterns?

The CERN patterns are encapsulated in a single module: The CERN Components module. In order to be able to use the patterns, you just need to enable it. For better user experience, you are also highly advised to use the CERN theme.

How to re-use the patterns in your own content types?

As already mentioned, every pattern uses pattern fields. In order to re-use the patterns in your content types, you just have to map the pattern fields with the fields of your content type. The mapping is done for each view mode of the content type and it is as easy as a single drag-n-drop.

But let's re-consider the example that we previously mentioned related to boxes. In order to achieve this result you need to follow some steps.

First of all you need to create a View Mode called "Card". The name does not play a role so you can call it as you want. The view modes help to have different displays for the same content type, meaning that the same content type will be rendered in different ways based on the chosen display. Then navigate to the Manage Display page of your content type and more specifically to the tab of the view mode that you created in the previous step. At the bottom of the page, there is the option to choose layout. In this example, we choose as layout the "Preview Card" pattern. It is the pattern that provides the card result which was previously analysed. The full list of patterns will be later analysed in the article. After choosing the layout, click on "Save configuration".

After saving the configuration, you will notice that the list of fields above has slightly changed since there is also a list of extra fields with bold letters. This list represents the pattern fields. What is left to do now is to map every field of the content type to a pattern field of the selected pattern. If you change the pattern, you will notice that the patterns fields change, which proves the fact that each pattern has it's own fields. In order to map each content type field to a pattern field, we just have to drag-n-drop the content type field under the pattern field. You will also notice that you can place more than one content type fields under the same pattern field. This happens because you have a priority of fields. The fields will render the one after the other in the given priority.

Field mapping when using CERN patterns

What are the available CERN patterns?

In the following list we present the available patterns. The colors in the screenshot mark the respective fields of the right column.

 

Component-based patterns

 

Title Screenshot Fields Comments
Preview Card Preview Card pattern
  • Title
  • Category
  • News Format
  • Date
  • Background Image
  • In order to be rendered properly, set the pattern setting to "Only Content"
  • In order to display a resource icon above the title, you can read the how-to article.
FAQ List FAQ List pattern
  • Title
  • Body
 
Preview List Preview List pattern  
  • Title
  • Image
  • Strap
  • News Format
  • Topic
  • Date
 
Agenda Box Agenda Box pattern
  • Start Date
  • End Date
  • Title
  • Content Type
  • Place
  • In order to display the date you need to set both the Start Date and the End Date. If not, then none of them will be displayed.
Agenda coming soon The agenda coming soon
  • Title
  • Date
  • Place
  • You have to remove the h2 wrapper from the title
  • Also you have to make sure that 'Only content' is selected in the field template settings under the 'Pattern settings' tab
Related Card Related Card pattern
  • Link
  • Text
  • Profile Image
  • Date
  • You have to remove the h2 wrapper from the title and check the Link checkbox
  • Also you have to make sure that 'Only content' is selected in the field template settings under the 'Pattern settings' tab
  • Very useful pattern if you want to display profiles and users (ex. employees, members etc)

 

Full content patterns

Full content patterns are meant to be used in order to render the page of each node. The available patterns are the following:

Title Screenshot Fields Comments
News Full Content The news full content pattern
  • Title
  • Strap
  • Date
  • Byline
  • Body
  • In order to be rendered properly, set the pattern setting to "Only Content"
  • If you have a field that references paragraph types, then you can use the Components pattern field to render components at the end of your "News piece".
  • Try to leave the News Format pattern field empty

 

 

Where can I use the patterns?

Until this point, it is clear that patterns constitute scaffolds in order to display a content type in specific way. But where can you use them? The answer is simple: in any place that you display content. This can be in a view, a block or even in a node itself.

For example in the home website you probably have noticed the following carousel.

 

News Carousel

This is a view that displays multiple news rendered using the Preview Card pattern. Every piece of news is rendered as Preview Card and all news are rendered within a view. However, in order to create the carousel or some other view formats, you need to use the Display Formats module.