A free HTML5 based content type allowing creatives to create interactive timelines. All you need is this content type and H5P.com or the H5P plugin in publishing systems like Canvas, Brightspace, Blackboard, Moodle and WordPress to start creating.
Would you like to create content like this on your own?Get started
Register on H5P.com to start creating H5P Interactive content. Your content can be accessed via direct link, embeded, or inserted into any learning management system that supports LTI integration.
This is Timeline.js developed by Knight Lab, packaged as an H5P content type in order to make timelines easily editable, shareable and reuseable.
The Timeline content type allows you to place a sequence of events in a 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.
Learn how to create a Timeline in this tutorial.
The H5P content on this page is licensed under Creative Commons Attribution 4.0 International unless another Creative Commons license is specified under rights of use. The author of the content is H5P Group
New to H5P? Read the installation guide to get H5P on your own site.
Fri, 08/08/2014 - 17:40
I just downloaded and installed the WP plugin and tried to load the Timeline content type and got the following errors:
Missing dependency H5P.Timeline 1.0 required by ..
Missing dependency TimelineJS 1.0 required by ..
Mon, 08/18/2014 - 13:17
Ugh, we'll look into that
Ugh, we'll look into that very soon.
Mon, 12/14/2020 - 10:34
I DIDN'T LIKE IT! HORRIBLE!
I DIDN'T LIKE IT! HORRIBLE!
Mon, 12/14/2020 - 18:45
Hi Carol,I'm sorry that you
I'm sorry that you didn't like it. Would you mind providing more context on what you did not like?
Wed, 09/17/2014 - 18:19
Flickr photos not showing
Wondering if there are specific settings I have to use in Flickr to get my photos to show on the timeline. Doesn't seem to be working at all.
Thu, 09/18/2014 - 02:24
I think it might be an issue with flickr wanting to https all of my image links .. same issue happens with the other service that the timeline is supposed to work with.
Tue, 09/30/2014 - 10:55
In the latest version of the
In the latest version of the H5P Timeline, this problem is fixed
Thu, 11/26/2020 - 02:31
Flickr photos also not showing
I was just wondering if this ever got resolved? I am having similar issues. Sorry I am posting to here as a REPLY as I can't seem to start my own thread in the forum. However, query below?
Is there a reason why my Flickr images (3rd Party Public account) unable to display the images in the timeline? If you click the icon, it will take you to Flickr withe correct image but it won't show in the timeline itself.
Wed, 09/17/2014 - 22:37
Thumbnails are uploading correctly but get inserted as: <img src="[object Object]">
thxs! Awesome functionally
Tue, 09/30/2014 - 11:33
In the latest version of the
In the latest version of the H5P Timeline, this problem is fixed.
Thu, 03/05/2015 - 10:04
Change default font
Is there a quick fix to change the default font used in the main body of the timeline to Arial or some other sans serif font?
Thu, 03/05/2015 - 11:38
If you use Drupal you may use
If you use Drupal you may use hook_h5p_styles_alter, please report back if you use wordpress.
Fri, 03/06/2015 - 01:43
Cool. Am using Drupal. Will
Cool. Am using Drupal. Will give it a go.
Tue, 04/21/2015 - 18:04
Problem with Timeline
Is there a problem with the timeline at the moment - the bottom half of the timeline area (with the dates and labels) doesn't seem to bee scrolling/functioning properly. This is happening on the example above for me too
Wed, 04/22/2015 - 09:10
You are correct, there is a
You are correct, there is a problem with the timeline. We will look into it asap.
Wed, 04/22/2015 - 09:24
The problem has been found.
The problem has been found. When editing the H5P, and there are no eras defined, the editor will add an Era-block. If the H5P is then saved (with the different fields in the era-block empty), this error will be seen.
The solution for now is to remove empty Eras. We will make the next version of the timeline handle this better!
Wed, 04/22/2015 - 14:10
Ah yes, I see. Problem solved
Ah yes, I see. Problem solved! Thanks
Sat, 05/23/2015 - 10:18
something to consider
I was thinking of using the Timeline content for something slightly different. I am presenting a writing course and with that, story arc information, and I thought it would be great to move along the information. However a YYYY is required. It'd be great if this requirement wasn't there, because essentially this content could be applied to anything where you want to move along an X axis.
Just a thought.
Sat, 05/23/2015 - 10:22
playing around with it. I
playing around with it. I see the timeline requires a date so that it knows where to place the blurb on the timeline. I suppose this could be a "position" value. But don't know how complicated that would make it. Is the interface code editable?
Sat, 05/23/2015 - 10:23
Sat, 05/23/2015 - 10:28
I was able to put 0001 in the YYYY box and it gave me a 1, 2, 3, above each segments title. That works well enough. :)
Tue, 05/26/2015 - 13:05
Wed, 10/28/2015 - 15:29
Possible to remove timeline at bottom?
Is it possible to remove the bottom part of the timeline, so effectively the activity is more of a slide by slide display of events?
Thu, 10/29/2015 - 09:25
Hi Steve, I'm afraid not :/
I'm afraid not :/
Wed, 01/13/2016 - 20:04
Images are not displaying
I added some images via wikimedia commons (just like the example), but instead of an image, I'm getting the broken image icon.
Thu, 01/14/2016 - 10:27
How did you add the image? Did you link to the image file or image page on Wikimedia commons from the assets or did you download the file? Could you provide a link to a page where the H5P with the missing image is?
Thu, 01/14/2016 - 11:58
Hi,Are you sure you are
Are you sure you are adding a link to the image, or could it be you are adding a link to the page where the image is displayed. If you add the link to the image as a comment here, we can help you verify what is wrong.
Another problem could be you are mixing http and https.
Anyways you should look into the browser's developer console to check if there are some error-messages there.
Thu, 01/14/2016 - 23:44
I think you're right that is was the link where it was being displayed and not the actual image.
Here is an example: http://learngis.org/drupal/node/3
I fixed my problem by hosting my images on my own site and displaying them that way.
Tue, 01/19/2016 - 22:26
Great, glad it work. Hope you
Mon, 02/01/2016 - 20:37
A few puzzling behaviours...
I haven't been able to figure out how to get an image to show in the details viewer panel that renders above the timeline. I have added thumbnails, which show up in the timeline widget, but they are not rendering above. What am I missing?
How do I set a span of time for beginning and end dates for the timeline interactive?
Also - some have asked me whether it would be possible, in future (if this interaction is updated), to affix different colours to various events/milestones in the timeline. Is that feasible?
And is there any way to set how tall the scrolling panel is, and how many milestone bubbles can be stacked within that height?
Mon, 02/01/2016 - 21:06
Hi!I'm no timeline expert,
I'm no timeline expert, but you may give my suggestions a shot.
Mon, 02/01/2016 - 22:13
1. Because I uploaded the thumbnail, I figured the same image could be available. If I understand you correctly, that isn't true - and the only way to get an image in the upper part (the details part) of the timeline is to provide one via an image at a URL, or at Flickr. Have I got that right? There's no way for me to upload the image to Drupal environment and then build a link to it in the interactive?
2. Yes - right now, the timeline seems to scroll a far distance into the past and future. My timeline only covers a period of about 18 years. I was wondering if there was a way to tell the interactive to not scroll infinitely to the left or the right, but to stay within the boundaries of my 18 years of information.
3. I think this would be a useful improvement for the next time this type of interactive is updated.
4. This too would be worth including as a feature request?
Tue, 02/02/2016 - 17:04
Thu, 02/11/2016 - 23:43
Thank you for the great
Thank you for the great integration with timeline.js. I just would like to give a feedback. Today, I had a issue that TWO timeline h5p contents could not be in the same page (the page showed blank (complete white), but ONE worked very well. Not sure it is h5p part or timeline.js part.
Fri, 02/12/2016 - 16:52
Thank you for reporting.
Thank you for reporting. Strange. I tried to reproduce it here, but both seems to work.
Fri, 02/12/2016 - 17:14
Hello falcon, thank you very
Hello falcon, thank you very much for the test. I tested again in the exactly same web and it works now. I do not know exactly the reason. I think it might be because network link break or somthing internet issue before. Thank you again for the quick response.
Mon, 02/15/2016 - 14:52
Ok, strange, glad it started
Tue, 02/23/2016 - 08:42
How to change the Dates expanded ?
How to change the Dates expand ? the user experience of the end user view not good because the page too long.
Tue, 02/23/2016 - 08:51
Hi, I'm sorry, didn't get the
Tue, 02/23/2016 - 08:59
Please check this image
Please check this image
Tue, 02/23/2016 - 11:46
I think you need to change
Tue, 02/23/2016 - 11:50
Sorry, cao you explain more
Sorry, cao you explain more detail? I don't understand you mean. I just want the Date do not extend, make sure the user not mistaken from a box to the other.
Tue, 02/23/2016 - 12:25
I see. I agree that this is
Tue, 02/23/2016 - 11:30
Hi. I'm trying to upload a thumbnail for my dates but I have a problem.
It worked for the first two dates but not for the rest.
I've got the message : "File Upload Error: Unable to create a directory"
What can it be ? Thanks for your help.
Tue, 02/23/2016 - 11:41
Hi, are you using WordPress
Tue, 02/23/2016 - 11:43
Tue, 02/23/2016 - 12:28
Wasn't able to reproduce the
Mon, 07/18/2016 - 14:12
If I download the strawbwrry timeline and add it to my own moodle, I get a working fill in the blanks example? wrong file attached??
Tue, 07/19/2016 - 10:40
Hm, that's strange.I tried it
Hm, that's strange.
I tried it on my Moodle installation and it appears to be working. Could you please double check to make sure that you uploaded the correct file?
If it is indeed broken would you mind uploading the file here?
Tue, 07/19/2016 - 08:46
I use the filter in moodle
I use the filter in moodle and add the timeline as an attched file, (h5p filter in moodle switched on)