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.
The example above is used in the widely used boxes in our new home website. The pattern consists of the following pattern fields:
- News Format
- 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.
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.
|Agenda coming soon||
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:
|News Full Content||
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.
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.