Countdown to upcoming event

Submitted by kplatis on Tue, 09/15/2020 - 12:32

This is a tutorial on how to render the upcoming event using a countdown. It is assumed that you have already created a content type in order to render the content, either an Indico event content type or a custom event content type.

Part 1) Use the Agenda Coming Soon component to configure the nodes to be rendered as cards

Each node is rendered as an expandable item. This is done by mapping the fields of your content type (eg. Indico Event, Custom Event etc) to the fields of the Agenda Coming Soon component.

Steps

  1. Visit the Manage Display page of the content type that you want to display (eg. Indico Event, Custom Event etc)
  2. Select a view mode (eg. Featured) and map the fields of the content type to the ones of the component
  3. Save the form

Video

Tutorial on how to map fields in the Agenda Coming Soon component (Video: CERN)

 

Part 2) Configure a view to be rendered using the Countdown display format

After setting up how each node will be set, a view needs to be created in order to gather and display the content items.

Steps

  1. Visit the views page
  2. Create a new view
  3. In the view:
    1. Create a display, either page or block, based on your needs
    2. Select Countdown as format
    3. Select to show Display Suite: Content and as view mode select the one configured in step 1.2
    4. Add any other filter/url/configuration based on your needs

Video

Tutorial video on how to create a view to display a countdown for the next event in a CERN Drupal site (Video: CERN)