Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughCreate a Simple Timeline with Views in Drupal
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.
Step #2. Add fields to the Olympic Games content type
- Click the 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
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:
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:
- 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.
- 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.
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