Create a Simple Timeline with Views in Drupal

How to Show Simple Timeline with Views

The “A Simple Timeline” module allows you to create a great looking, vertical timeline of Drupal entities.

This timeline could be used to tell the story of your company, organization or perhaps even real historical events.

For the purpose of this tutorial, I’m going to show you how to create a timeline showing all the Summer Olympic Games of the 21st century.

Step #1. Create the Content type

  • 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 content type

  • Click the Add field button

Add field buttonAdd the following three fields:

  • Field type: Image
  • Label: Logo
  • Field type: Date
  • Label: Opening 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:

  • Logo
  • Opening Ceremony
  • Closing Ceremony
  • Body

There are also a couple more changes we need to make:

  • 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 (220×220)
  • 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. Let’s create and publish our timeline:

  • 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.

Author

  • Jorge Montoya

    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.

0 0 votes
Article Rating
Subscribe
Notify of
7 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Marc Robinsone Caballero
Marc Robinsone Caballero
6 years ago

this is awesome and superbly well-written. Kudos and thanks for the very detailed guide Mr. Jorge!

steve
steve
6 years ago

Thanks for the positive feedback, Marc

brrr
brrr
5 years ago

how can I put this timeline view into paragraph? I need it to display timeline in landing-page

Jenifer
Jenifer
5 years ago

A very nice tutorial Jorge, thank you.

I’m using this on my beekeeping page and noticed that the styling doesn’t look like the example for the module. This is on a Drupal 7 site and the style options doesn’t expand like your tutorial is showing.

Page: Style options

List class (empty text box)
The class to provide on the list element itself

Is your tutorial for a D8 site?

Ella
Ella
3 years ago

Very helpful Turorial, still need help with how to translate each node with other languages, any help with this?  

7
0
Would love your thoughts, please comment.x
()
x