H5P Guides

Timeline Tutorial

The Timeline content type allows you to place a sequence of events in chronological order. For each event, you may add images and texts. You may also include assets from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud.

Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!


Here's the Timeline content we'll create in this tutorial:

When to use Timeline

You can use a Timeline content type for a content where you want to present a sequence of events in chronological order.

Step 1: Topic

The topic of this content is the History of berries

Step 2: Creating a timeline

Select the New content option and choose Timeline from the list of Content types:

Step 3: Timeline Editor

The Timeline editor should now appear. It consists of three main parts:

  • Title,
  • Timeline and
  • Dates

Step 4: Title

Type the following text in the Title field: History of berries

Step 5: Timeline

This part consists of content for a starting slide and some overall settings for the entire timeline.

HeadlineHistory of strawberries 
Body text: The strawberry plant is a member of the Rosaceae family and the genus Fragaria. Against the common belief that strawberry is a fruit, the fleshy red outgrowth is actually the receptacle of the strawberry flower.
Source: http://www.buzzle.com/articles/history-of-strawberries.html

Background image:
We will leave this blank since we want to use a different image on each slide

Credits: Author: Jeff Kubina. License:  Creative Commons Attribution-Share Alike 2.0 Generic. URL: http://commons.wikimedia.org/wiki/File:Half_a_strawberry.jpg

You should get this:

Step 6: Dates

Next, we will add dates to our timeline. In Dates section fill in the 1st group with the following content:

Start date-234
End date-234
Body textThe history of Strawberries goes back over 2,200 years. The growth of wild strawberries in Italy can be traced back to 234 BC.
CreditLicense: Public domain. URL: https://commons.wikimedia.org/wiki/File:Pomological_Watercolor_POM00004368.jpg

You should get something like this:

To add a new Date item, click Add item button below the Dates group:

In the same way, fill in all the other dates with the following content:

Start date0023
End date0079
HeadlineEarly mentions of Strawberries
Body textLatin writers such as Apulius had cited the strawberry for its medicative purposes. Other writers such as Virgil and Ovid mentioned strawberry only in association with other wild fruits. Pliny (23-79 A.D.) was the last-known writer to mention this fruit.
CreditAuthor: Maksim. License:  Creative Commons Attribution-Share Alike 3.0 Unported. URL: http://commons.wikimedia.org/wiki/File:Aardbei_Karina.jpg


Start date: 1200
End date: 1300
HeadlineMiddle ages
Body text: In the thirteenth century, a famous Greek doctor 'Nicholas Myrepsus' had mentioned Strawberries in his paintings.
CreditAuthor: Hieronymus Bosch. License: Public domain. URL: http://commons.wikimedia.org/wiki/File:Bosch,_Hieronymus_-_The_Garden_of_Earthly_Delights,_central_panel_-_Detail_Strawberry.jpg

You can add as many dates as you want to your Timeline.

Step 7: Finishing up

When you are done adding dates, save the node/article to view your finished Timeline.
You should now have the same result as the example on top of the page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.