CERN Accelerating science

Close menu
CERN Display Formats

Useful Info


The CERN Display Formats module provides pre-defined rendering modes (displays) for views.

Package Maintainers:
The CERN Web Team

Documentation

The CERN Display Formats is a module designed by the Web Team in order to provide out-of-the box views display formats. A Drupal display format can be applied to a view in order to be displayed in a specific way. For example as Boxes carousel or as an accordion.

Getting Started

This module is placed in the CERN infrastructure so if you own a CERN Drupal website, you have this module installed by default. All you have to do is to navigate to /admin/modules and enable the module. After enabling the module, the display formats will be visible in your views.

The styles of the display formats are stored within the CERN Theme so that consequently means that in order to use the formats, you need to be using the CERN Theme or the CERN Override theme. 

Moreover, as you will notice in the next paragraphs the Display Formats require the usage of specific patterns and as a result the Display Formats module has a dependency on the CERN Components module.

Colors and Settings

The colors of the display formats and components are partially inherited from the CERN Theme and partially set in the Display Formats settings. You can find the Display Formats settings if you visit the configuration settings (/admin/config) and then click on "Display Formats" or if you just visit /admin/config/display-formats/settings. The color settings for each separate format is explained in the description of the formats.

As you will notice, the color settings are repeated so that the theme and the website will be consistent. For example all the cards displayed in your website should have the same color in order to keep a consistency and the reader will not get tired.

The formats

Until version 1.4.0, the implemented display formats are: 

 

The formats can be selected in the Format option of a view.

The display formats list

As it is already mentioned in the CERN Components documentation, the patterns actually render each node in a specific way. The display formats on the other hand render views of patterns. At this point it is important to highlight the fact that in order to render the formats as they should, you need to set a specific view mode for the content that is rendered. As a result, for each display format we will also mention what is the pattern that you should use in order to be rendered in the correct way. 

Accordion

Since: v1.1.0

The accordion renders content in an expandable way and as a result it is a good solution, when it comes to a showing/hiding functionality, especially in the case of FAQs.

 

FAQ accordion example

 

Usage

In order to reproduce it:

  1. You need to have a Content Type (ex. FAQ)
  2. Create a view mode which re-uses the FAQ List pattern as explained in CERN Components documentation.
  3. Create a view which will produce the block and choose "Accordion" as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the FAQ List pattern.
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

 

Colors

  • Title (question): Set in the Display Formats settings page (/admin/config/display-formats/settings) 
  • Body (answer): Inherits the color BODY: text from the theme color settings

 

Horizontal Boxes

Since: v1.1.0

The Horizontal Boxes view display format is one of the most used in the home website. If you have browsed in the home website, you probably have noticed specific views that load as carousels of boxes. These views are created using the Horizontal Boxes display Format.

 

Horizontal Boxes example

Usage

In order to create views that use the Horizontal Boxes display format:

  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses the Preview Card as explained in CERN Components documentation.
  3. Create a view and choose Horizontal Boxes as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Preview Card pattern
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

"View all news" link at the bottom of the view

To display the "View all news" button like on the screenshot above, all you have to do is to add a link in the footer of the view. More analytically:

  1. In the view settings add a new Footer element of type Text Area
  2. In the text area choose Full HTML format, and add
    <a href="https://home.cern/news">View all news</a>
  3. Save the view and the link will be displayed as above

Colors

For each one of the cards, the colors are:

  • Title: Inherits the color CARDS/BOXES: title from the theme color settings.
  • Subtitle: Inherits the color CARDS/BOXES: text from the theme color settings.
  • Background Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is only applied if you haven't set an image for the node.

An additional color is set for the navigation dots under the view and inherit the colors ICONS: Slider navigation active/inactive when its active or inactive.

 

Collision

Since: v1.2.0

The collision view display format renders the nodes using a carousel and applies a collision effect when changing from node to node.

Screenshot of the collision effect

Usage

In order to create views that use the Collision display format:

  1. You need to have a Content Type (ex. Event)
  2. Create a view mode which re-uses the Agenda Box pattern as explained in CERN Components documentation.
  3. Create a view and choose Collision as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Agenda Box pattern
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

For each one of the entries in the collision, the colors are:

  • Title: Inherits the color BODY: Link from the theme color settings.
  • Subtitle: Inherits the color BODY: text from the theme color settings.

An additional color is set for the navigation arrows on the right and left of the view and inherit the colors ICONS: Slider navigation arrows active/inactive when its active or inactive.

 

Teaser List

Since: v1.2.0

The teaser list view display format renders nodes one under the other using appropriate spacings

The Teaser List display format

 

Usage

In order to create views that use the Collision display format:

  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses the Preview List pattern as explained in CERN Components documentation.
  3. Create a view and choose Teaser List as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Preview List pattern
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

For each one of the entries in the Teaser List, the colors are set accordingly:

  • Title/Link: Inherits the color BODY: Link from the theme color settings.
  • Strap: Inherits the color BODY: text from the theme color settings.
  • Format / Topic / Date: Inherits the color BODY: text from the theme color settings.
  • Card Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is only applied if the node does not have an image set in the image field. The image covers the color.

 

Countdown

Since: v1.2.0

The countdown view display format displays one event with a countdown effect.

The countdown display format

Usage

In order to create views that use the Collision display format:

  1. You need to have a Content Type (ex. Events)
  2. Create a view mode which re-uses the Agenda coming soon pattern as explained in CERN Components documentation.
  3. Create a block view and choose Countdown as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Agenda coming soon pattern
  5. Set the pager to "Display a specified number of items" and then display 1 item.
  6. Make sure to add a date filter that start date >= now so that when the starting time has passed, the view will continue to the next event. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

The colors of the Countdown Display Format are all set in the Display Formats settings page (/admin/config/display-formats/settings).

 

Vertical Boxes

Since: v1.3.0

Vertical Boxes display cards in a vertical orientation

Example of the Vertical Boxes display format
Example of the Vertical Boxes display format

Usage

In order to create views that use the Vertical Boxes display format:

  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses one of the card pattern from CERN Components, either Preview Card or Related Card. You can read how to do it in the CERN Components documentation.
  3. Create a page or block view and choose Vertical Boxes as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the card pattern.
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

The colors applied for each one of the cards displayed are:

  • Title: Inherits the color CARDS/BOXES: title from the theme color settings.
  • Subtitle: Inherits the color CARDS/BOXES: text from the theme color settings.
  • Background Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is displayed only if the image field of the node does not have an image applied. The image always covers the color.

 

Since: v1.3.0

The Featured Banner displays a box with a link and text placed on top of a background. Until the current version the user cannot upload an image as a background of the view, so they have to use it either in a Landing Page section or to set the background manually using the CERN Override theme.

Usage example of the Featured Banner display format
Usage example of the Featured Banner display format

Usage

In order to create views that use the Featured Banner display format:

  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses the Preview Card. You can read how to do it in the CERN Components documentation. The only difference is that you should map the title to Featured Title instead of Title.
  3. Create a page or block view and choose Featured as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the card pattern.
  5. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

The colors applied for the Featured Banner are:

  • Title/Link: Inherits the color BODY: link from the theme color settings.
  • Subtitle: Inherits the color BODY: text from the theme color settings.
  • Box Background Color: Set in the Display Formats settings page (/admin/config/display-formats/settings) 

 

 

Card Grid

Since: v1.4.0

Displays cards as a responsive grid of cards.

Card grid display format

Usage

In order to create views that use the Card Grid display format:

  1. You need to have a Content Type (ex. News)
  2. Create a view mode which re-uses one of the card pattern from CERN Components, either Preview Card or Related Card. You can read how to do it in the CERN Components documentation.
  3. Create a page or block view and choose Card Grid as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the card pattern.
  5. Set the pager to "Display a specified number of items" and then display a number that is exactly divided by 3 (6,9,12 etc)
  6. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behavior of the view.

Colors

The colors applied for each one of the cards displayed are:

  • Title: Inherits the color CARDS/BOXES: title from the theme color settings.
  • Subtitle: Inherits the color CARDS/BOXES: text from the theme color settings.
  • Background Color: Inherits the color CARDS/BOXES: Card background from the theme color settings. The color is displayed only if the image field of the node does not have an image applied. The image always covers the color.

 

Event Grid

Since: v1.4.0

Displays event boxes as a responsive grid of boxes.

The Event Grid display format
An example of the Event Grid display format

Usage

In order to create views that use the Event Grid display format:

  1. You need to have a Content Type (ex. Indico Events, Events etc.)
  2. Create a view mode which re-uses the Agenda Box pattern as explained in CERN Components documentation.
  3. Create a page or block view and choose Event Grid as Display Format
  4. In "Show" option choose Display Suite: Content and as view mode choose the view mode that you created on step 2 that re-uses the Agenda Box pattern.
  5. Set the pager to "Display a specified number of items" and then display a number that is exactly divided by 3 (6,9,12 etc)
  6. Feel free to re-use any filter criteria, sort criteria, contextual filters and/or any view setting. It won't affect the behaviour of the view.

Colors

The colors applied for each one of the event boxes displayed are:

  • Title/Link: Inherits the color BODY: link and BODY: link on hover from the theme color settings.
  • Date: Inherits the color BODY: text from the theme color settings.
  • Subtitle: Inherits the color BODY: text from the theme color settings.
  • ICS Link: Inherits the colors of BUTTONS / PRIMARY: background, BUTTONS / PRIMARY: text, BUTTONS / PRIMARY: background hover, BUTTONS / PRIMARY: text hover from the theme color settings.