Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Create a Simple Timeline with Views in Drupal

Parent Feed: 

With "A Simple Timeline" contribution module in conjunction with the Drupal core module "Views" you can present a nicely looking and well organized vertical timeline of Drupal entities. It could be, for example, teasers. This is exactly what you will learn in this post. 

For the purpose of this tutorial, I will use a sequence of the Summer Olympic Games of this century. Let's get started!

Step #1. Create a Content type Olympic Games

  • Go to Structure > Content types > Add content type
  • Create the content type
  • Click Save
  • Add the required fields for this particular content type.

Add content type "Olympic Games"

Step #2. Add fields to the Olympic Games content type

  • Click the Add field button

Add field button

  • Add the following three fields:
    • Field type: Image
    • Label: Logo
    • Field type: Date
    • Label: Openning Ceremony
    • Field type: Date
    • Label: Closing Ceremony

Add field Logo

Add field Opening Ceremony

After adding those three fields you will see the following screen:

Screen after adding the fields

Step #3. Configure the display of the Teaser View

  • Click the Manage Display tab on the right
  • Click the Teaser option, as we are going to display Drupal teasers in this example
  • Go to Structure > Content types > Olympic Games > Manage Display

Manage display

  • Rearrange the fields in following order:
    1. Logo
    2. Opening Ceremony
    3. Closing Ceremony
    4. Body
  • Set the LABEL of the Logo field to Hidden
  • Click on the cogwheel on the right, where you can configure the image style:

Hide the label of the logo

  • Select Medium (220x220)
  • Click Update

Choose Medium (220x220) and click Update

  • Set the labels of the Opening and Closing Ceremonies to Inline
  • Configure the Date format to be displayed as HTML Date 
  • Click Update in both cases.

Set the labels to the Opening and Closing Ceremonies to Inline

  • Configure the Format of the Body field to the Summary or trimmed
  • Click Save

Configure the Format of the Body field

Step #4. Create the Nodes

  • Go to Content > Add Content > Olympic Games

The text and images for this tutorial were taken from the english version of Wikipedia. You can use your own examples or you can just use the Devel module to create five nodes from type Olympic Games:

Create the node and click Save and publish

  • Create the node
  • Click Save and publish

Step #5. Create the Timeline

It’s time for the fun part.

  • Go to Structure > Views
  • Click Add view:

Add view button

  • Create a View with the following specifications (please pay close attention to the PAGE DISPLAY SETTINGS): Display format: Simple Timeline of teasers 
  • Click Save and Edit

Display format: Simple Timeline of teasers

Step #6. Change the SORT CRITERIA

Our timeline is almost ready. There’s only one last step we have to do in order to get the teasers in the right order.

  • Click on Configure sort criterion: Content: Authored on
  • Click on Remove to remove the criterion.

Click on Content: Authored on and remove that criterion

The SORT CRITERIA area is now empty.

  • Click the Add button, in order to add the criterion that will sort the teasers in a chronological order:

Add the criterion that will sort the teasers in a chronological order:

  • Type the word opening in the search box in order to choose the field Opening Ceremony as the sort criterion
  • Click the Add and configure sort criteria button

Add and configure sort criteria

  • Leave everything as is
  • Make sure the option Sort ascending is selected
  • Click Apply.

170824 simple timeline 17

  • Now you can save all your changes in the Views UI.
  • Take a look at your finished timeline by clicking the View page button.

Take a look at your finished timeline

Pretty cool, isn’t it? You can change the timeline settings if you click on the word Settings in the FORMAT area of the View. You can choose the position of the marker and the position of the timeline items.

Timeline settings

Position of the marker an the timeline items

There you have it! You now know how to present Drupal entities in a nicely looking vertical timeline using "A Simple Timeline" community contributed module.

Please leave your comments and questions below. Also, you may want to share here your own experience with this module. I hope you enjoyed reading this tutorial.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web