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.

Step #2. Add fields to the content type

Click the Add field button

Add the following three fields:

Field type: Image

Label: Logo

Field type: Date

Label: Opening Ceremony

Field type: Date

Label: Closing Ceremony

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

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

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:

Select Medium (220x220)

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.

Configure the Format of the Body field to the Summary or trimmed

Click Save

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

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:

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

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.

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:

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

Leave everything as is

Make sure the option Sort ascending is selected

Click Apply.

Now you can save all your changes in the Views UI.

Take a look at your finished timeline by clicking the View page button.

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.

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.