Drupal Technical

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

Pradeesh.raj | | 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

 

 

Related Topics