Timeline

Primary tabs

Submitted by H5P Group on Wed, 05/14/2014 - 11:16

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.

And more

Description

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.

Timeline.js project page

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.

Comments

misterovich

Fri, 08/08/2014 - 17:40

Missing Dependencies

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

falcon

Mon, 08/18/2014 - 13:17

Ugh, we'll look into that

Ugh, we'll look into that very soon.

carol.rueda

Mon, 12/14/2020 - 10:34

I DIDN'T LIKE IT! HORRIBLE!

BV52

Mon, 12/14/2020 - 18:45

Hi Carol,I'm sorry that you

Hi Carol,

I'm sorry that you didn't like it. Would you mind providing more context on what you did not like?

-BV

Kendie

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.

thxs!

Thu, 09/18/2014 - 02:24

https issue?

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.

fnoks

Tue, 09/30/2014 - 10:55

In the latest version of the

In the latest version of the H5P Timeline, this problem is fixed

N Diamond

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.

thummel

Wed, 09/17/2014 - 22:37

broken thumbnails

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 H5P Timeline, this problem is fixed.

davidv

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.

rickhumphries

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

davidlevack

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.

Great work!

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

using wordpress

fyi

Sat, 05/23/2015 - 10:28

work around

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

:)

stopbit

Wed, 10/28/2015 - 15:29

Possible to remove timeline at bottom?

Hi,

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?

Thanks

Steve

Thu, 10/29/2015 - 09:25

Hi Steve, I'm afraid not :/

Hi Steve,

I'm afraid not :/

duqtape

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.

Thanks!

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

Example

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

Great, glad it work. Hope you're enjoying H5P!

tkasenberg

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,

Hi!

I'm no timeline expert, but you may give my suggestions a shot.

You may try to add a url to the image under assets -> media. I think Flickr images are supported and Wikimedia Commons also seem to be supported
Not sure what you mean by timeline interactive? Is it the entire timeline? If so I don't thin you can.
No expert as I said, but should be feasible if you have access to developers. Will be happy to merge in a pull request for this.
I don't think so :/ Don't know how easy it is to add, but hopefully not too hard :)

Mon, 02/01/2016 - 22:13

Thanks...

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

http://upload.wikimedia.org

http://upload.wikimedia.org/wikipedia/commons/8/8f/Strawberry2.jpg is the url used in the example above, but I wasn't able to make it work with a random image url, so perhaps it only works for wikimedia, Flickr and similar?
I agree, would make a lot of sense. Doesn't seem to be supported at the moment.
Yep
Yep

Timeline is a bit special since it is an existing javascript that someone just created a wrapper around to make it possible to create it using H5P. I don't know as much about it as I do for other content types, and don't have much control over it either. Any features that timeline.js supports should be possible to support here though.

hosais

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

Ok, strange, glad it started to work again. Wish we know exactly what made it fail. Please share if you see the problem again.

mediahanoi

Tue, 02/23/2016 - 08:42

How to change the Dates expanded ?

Hi bro

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

Hi, I'm sorry, didn't get the question. What do you mean by changing the dates expanded?

Tue, 02/23/2016 - 08:59

Please check this image

Tue, 02/23/2016 - 11:46

I think you need to change

I think you need to change the code that autogenerates those texts based on the input within the form. What text would you prefer to have there?

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

I see. I agree that this is an issue. The authoring tool generates that text based on the first form item which is the date. We would have to change the way the authoring tool works to fix this issue. It isn't something the core team will do very soon, but it will be fixed.

Ragdan

Tue, 02/23/2016 - 11:30

Thumbnail Error

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

Hi, are you using WordPress or Drupal?

Tue, 02/23/2016 - 11:43

Drupal

Tue, 02/23/2016 - 12:28

Wasn't able to reproduce the

Wasn't able to reproduce the problem. Must be something server specific. Have you checked your PHP error log for more details?

gtielemans

Mon, 07/18/2016 - 14:12

timeline???

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??

icc

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)

You are here

Timeline

Primary tabs

Would you like to create content like this on your own?

Description

Comments

Pages