How to use a component to render content

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