Hi all,

I want to build up a timeline similar to the CERN Antimatter Page (at the bottom of this page) and saw the CERN Timeline Web Component in the Landing Page. But you can only type in an external URL. How can I add such a timeline?

Kind regards,

Hi Nadine,

All official CERN timelines are handled by CERN IR-ECO-CO section (editorial team).
So you have to provided them all the information for each step of your timeline and in each language you want to propose. Then they will create the timeline on their own website and share the URL with you.

The main constraint is that everytime you want to add or update one timeline entry, you have to go through IR-ECO-VI again. You won’t get access to edit the timeline yourself.

I have created one on https://sciencegateway.cern/project (check bottom of the page):
As I needed also Italian for this website, the standard CERN timeline was not an option (they only support French and English).

I therefore used another solution: using a H5P element.

You first need to install the following modules (in the Extend menu):

  • CERN H5P Interactive Content
  • H5P
  • H5P Editor

Once done, you need to create a Content Type (let’s call it “H5P”) that will only have one field (“H5P content”) of type “Interactive Content H5P”.

When editiing a content of type “H5P” you simply say that the content type is “H5P Timeline” (you can upload it from https://h5p.org/timeline). Then you fill all required fields.

You can simply display your timeline as any other node.



Hi François,

Thank you for your very fast answer! I will try it directly!

All the best,

Hi @briard.

When you sign in to h5p.com, do you need to be registered/have a license for longer than the content creation? Or can you make it once, and then it will stay on your website with this URL?

Best regards,

Realizing I never answered your last question Nadine. Apologies for that.

Don’t go to H5P.com (commercial service), but H5P.org instead.

You just need to install H5P extensions for Drupal. Then specific H5P content type will be fetched as you use it.