Replicate views of the Home Website

Submitted by kplatis on Wed, 05/27/2020 - 10:34

One of the most requested subject is how to replicate the view display and formats of the home website. In this article we will explain as simple as possible how to achieve it.

 

Basics

 

In order to explain how to create the replicas, it is essential to first break down the basic elements of each view. The view is created from 2 basic elements: The format of the view and the display of each one of the nodes. In order to make the site building process easier for the users, we have packaged both elements in modules. The following image presents the two mentioned elements.

 

An explanatory image for the view

  1. The display of each one of the node, sets how each one of the nodes will be displayed. The displays are distributed in the form of Components via the CERN Components module. The module provides patterns that help the users render the nodes in a specific pre-defined way and at the same time using their own content types and fields. Please read the documentation of the CERN Components module for more details.

  2. The view display formats sets how the view will be formatted and structured. The Drupal core comes with a pre-defined set of formats - table, grid, unformatted list etc. In order to help the users replicate the view formats of the home website, we packaged them in a module called CERN Display Formats. However, the display formats can be used only with specific displays in order to be rendered correctly. The documentation of display formats explains exactly which displays should be used with each format, so please read it carefully.

 

Example

The image above constitutes a characteristic example in order to explain the already mentioned elements. More specifically:

  • In red color we marked the display of each one of the nodes. In this case the nodes are rendered as cards (Preview Card in CERN Components).
  • In blue color we marked the display format of the view. In this case the view is rendered as Horizontal Boxes (check Display Formats module)
  • In green color we marked the view itself. The view also contains a title (LATEST NEWS in this case) and a footer ("View all news" in this case).