[Drupal] How to create an interacitve timeline in Drupal?

| | 2 min read

One of our Drupal client had a requirement of responsive carousel. It should have swipe functionality in mobile, So I figured out a nice jquery plugin to solve all these requirements "Timelinejs"

TimelineJS is an interactive jQuery library to create visually, rich interactive timelines with various customization options. Lucky we have a Drupal views timeline js plugin available to embed these visually beautiful and user-friendly timeline into Drupal.

Step 1
Goto this url views_timelinejs and download
the latest release of the module and place it under sites/all/module directory of your Drupal installation

Step 2
Download libraries module Goto https://www.drupal.org/project/libraries. Get the latest and place it under you module directory.

Step 3
Next you need to download the actually timelineJs library, in order to download this goto TimelineJS and download the library, place it under sites/all/libraries folder. Enable the views timeline js and libraries module.

Step 4 : Create a sample timeline
The views timeline js plugin comes with an included custom timeline content type. You can either use it or create a new content type with your own fields with some mandatory fields. Create a new view and change the display format to "TimelineJs". you will need to map the following display in the format settings.

  • Headline (required) - Plain text; a high level summary.
  • Body text - Plain text; a paragraph or two of optional details.
  • Start and End Date - Required start and optional end of an event; can be a
    date field or time stamp.
  • Media URL - Drupal core image fields and link fields are supported; must
    contain a raw URL to an image or video.
  • Media Credit - Byline naming the author or attributing the source.
  • Media Caption - Brief explanation of the media content.
  • Tag - Content tagging; maximum of 6 tags.

Save the view and goto the view url.

Reference: Views timeline js readme.txt

Hope this short article has been helpful. Use the comment box below to share your views on Drupal Views and doubts about this article here