How to use the CERN H5P Interactive Content?

Site building
1

Hi,

During the last Drupal hackathon @kplatis showed me what had been done on the CERN Open Days website with the map and button hover it (see image below). It seems that in order to replicate this display the module CERN H5P Interactive Content must be installed. So i did :slight_smile:

My issue now is : how to insert H5P content in a landing page ?

I checked the documentation of the H5P Module, but didn’t manage to insert this content in the landing page content type.

Here is what i did :

  • Inserted a new Paragraph type (Structure -> Paragraph types -> Add new) and inserted a field of type H5P.
  • I trying to add a new section on a landing page and see if i could get some H5P content

It didn’t work.

Issue%20H5P
Issue H5P.jpg1110×2054 674 KB

I also tried to simply create a new content type and add an H5P field. This worked but i then get a list of content type to install (Multiple Choice, Fill in the Blanks …).

Do you guys have any experience with the CERN H5P Interactive Content module ?

Thanks a lot.

Maxime

2

Hey Maxime,

For the landing page you have to go inside paragraph types and then some column components (e.g. Main column web components) then there you have to tick the interactive components.

Concerning the install inside h5p (e.g multiple choice and so on), you need to install the content of your interest there. For the map of the opendays it is called image hotspots.

If you have any other questions, just reply!

Cheers,
Tobi

3

Hey @tbetz,

Awesome thank you for your response.

I saw the Interactive Content paragraph under Paragraphs types, however when trying to add a Main column web components i don’t see this paragraph type (see picture below).

Issue
Issue.png1241×1813 315 KB

Is there some kind of link to do ?

Thanks.

Maxime

4

Hey Maxime,

in Paragraph types click on manage fields for section and then click on edit at Main Column web components, then after in the reference types there is the type interactive content. Tick it. Then you can progress further.

Cheers,
Tobi

1 Like
5

Great it worked ! Thank you very much.

Maxime