Content not displaying in Wordpress

Submitted by barnabythebear on Fri, 07/27/2018 - 10:31
Forums: 
General discussion

Hiya all,

I have an issue with  H5P content not showing in Wordpress. I have two Hotspot Images that I would like to display on the same page. I have used a tabs plugin for each content.

https://library.northamptoncollege.ac.uk/induction/

The Lower Level tab displays fine but the Upper Level content dose not display. I have tired both embeding and shortcodes. With shortcodes the Upper Level is completly empty but with embeding I can see the embed and dowload links of the H5P. Viewing in Explorer is just the same.

I have tried to add them both using an accordian  plug-in (not H5P), and I couldn't see any content.

Interestingly, If I click on Upper Level tab and then go to developer tools in Chrome the Upper Level content displays and the Lower Level disappears. 

Wordpress version is 4.9.7 and the theme is IAMSocial.

Also, I find that some H5P conent on our site displays fine one day, but disappears on others. Is better Wordpress integration planned?

Thank you,

Nige.

otacke's picture

otacke

Fri, 07/27/2018 - 11:54

Hi Nige!

That's the same problem as described in https://h5p.org/node/205916 with the same explanation and solution.

Cheers,
Oliver

barnabythebear

Fri, 07/27/2018 - 12:41

Hi Oliver,

Thank you for your responce. I don't think I can add any javascript, it's a bit beyond my capabilities and I guess it may be lost everytime I update the theme? It's a shame, tabs are a nice solution. Back to the drawing board :(

Thanks,

Nige.

 

otacke's picture

otacke

Fri, 07/27/2018 - 12:57

Hi Nige!

Sorry for not having a better answer. 

You could try to contact the authors of the other plugin. The line of javascript would probably not hurt their content -- and if they check for the global variable H5P being present, they could even restrict it to be used only when necessary. However, since it's a pretty specific addition (why shouldn't other plugins request something similar ...), I'd understand if they don't want to do that.

Cheers,
Oliver

barnabythebear

Fri, 07/27/2018 - 13:10

Thank you Oliver,

I'll head over to the Wordpress forums and mention it.

Thanks again,

Nige.

barnabythebear

Fri, 08/03/2018 - 11:39

Hiya,.

I tried to add the javascript with a couple of wordpress plugins that inject javascript onto a chosen page but unfortunatly it didn't woirk. I tried adding it to both the header and footer. I checked with the inspector and the script was definatly on the page. Is there a specific place that the code need to live? It's currently in the page header.

Thank you,

Nige.

barnabythebear

Mon, 08/06/2018 - 11:42

Hi again,

I have tried the following code in both the header and footer but it doesn't seem to do work:

<script type="text/javascript">

window.dispatchEvent(new Event('resize'));

</script>

Using the inspector I can see that the code is there. Are there any other javascrpt tricks I could use?

Many thanks,

Nige.

otacke's picture

otacke

Mon, 08/06/2018 - 19:06

Hi Nige!

If you just include that script in the footer or the header, it will run once the script is loaded, but not afterwards. You'll have to trigger the resize event within the function that changes from one tab to the other -- but since it seems to be working on the website, you seem to have figured that out.

Cheers,
Oliver

p. s.: Sorry for replying with such a delay, I'm on vacation right now.

barnabythebear

Thu, 09/06/2018 - 11:58

Hiya,

Sorry, I still am struggling with this. The page has not worked so I'm not sure what you saw :)

I had our IT guys take a look at it but he couldn't figure out where to add the javascript specifically in Wordpress. Is there a way to write a function for the header that works continuously while to page is displayed. If not where specifically should we be putting the javascript?

Many thanks,

Nige.

otacke's picture

otacke

Thu, 09/06/2018 - 16:19

Hi Nigel!

I visited https://library.northamptoncollege.ac.uk/induction/ and may have been confused by the Course Presentation that was below the "tabbed" content. I can clearly see the problem now (and I can see that it's indeed related to the resizing).

Your IT will have to find the function inside the tab-plugin that's invoked when the tabs change and trigger a resize of the H5P content by adding one line of code as described in the other post that I linked to before: https://h5p.org/comment/19435#comment-19435

Cheers,
Oliver