use google translate on H5P contents

Submitted by atriaforever on Wed, 09/05/2018 - 17:07
Forums: 
General discussion

I use H5P on a WP multisite install and it runs fine.

On this install, I also have a WP plugin from GTranslate (https://fr.gtranslate.io/), which is a really nice solution to have my content multilingual.

The GTranslate plugin uses Google Translate and runs fine on standard WP content.

You can check it here by selecting a new language from the widget displayed in the lower left corner of the page.

https://trials.knowledgeplaces.com/training/formation-naturopathie

Unfortunately, the GTranslate plugin does not work on H5P content.

You can check it here:

https://trials.knowledgeplaces.com/training/autres-activites-h5p

When you select a new language, only the title is translated, which is standard WP content, but not H5P contents.

I have noticed the H5P contents are generated within iframes, and this may be the reason why they are not translated, as Google Translate does not automatically translate content in iframes.

So I think the issue is not plugin related, it is more a compatibility issue between Google Translate and iframes, in this cas H5P iframes.

Can you please provide a workaround for this?

I can use a child theme and add any javascript which may be needed to have a working solution.

Summary: 
google translate support
otacke's picture

otacke

Thu, 09/06/2018 - 10:01

Hi atriaforever!

You're correct. H5P being embedded in iframes is the reason why the contents are not translated -- and for security reasons, it's a very good idea that scripts cannot change the contents of iframes (unless everything resides on your own server). I don't think there's a simple workaround for this issue.

Cheers,
Oliver

atriaforever

Thu, 09/06/2018 - 17:28

Hi Otacke,

We use our own WP theme on our sites, so we can add almost anything, including custom Javascript files.

JQuery could be used to trigger a translation of the HTML div generated by H5P when the user selects a new language.

At what time is generated the HTML for H5P Activities? On the server? Using AJAX requests sent from the browser (doesn't seem so)?

Have you standardized ids or classes for iframes generated by H5P, so we could use those to identify them?

Cheers,

Eric

otacke's picture

otacke

Fri, 09/07/2018 - 09:23

Hi Eric!

The special server-side part is just responsible for providing files and configuration and passes those to the client-side, JavaScript based part of H5P. The latter generates the content. The iframe(s) will have an id that starts with "h5p-iframe", and the class name "h5p-iframe", so you should be able to select those and dig inside of them. Let me know about your progress, please!

Best,
Oliver

atriaforever

Fri, 09/07/2018 - 09:53

Hi Otacke, I will investigate this and keep you informed of the outcome.

Cheers,

Eric

atriaforever

Mon, 05/20/2019 - 15:53

Hi Otacke,

One year has passed and I come back with a solution developed by the people of the GTranslate plugin.

You can see a working example of localized H5P contents here: https://trials.knowledgeplaces.com/en/training/h5p-for-gtranslate/

There is a language selector at the bottom left of the page. The content is originally in French, but you can display it in Chinese, English and German.

This solution works perfectly but has one drawback: we have to modify some code in the H5P plugin, and this customized code would be lost each time we update the H5P plugin.

I would like to avoid this, and I have attached the following files:

class-h5p-plugin.txt: the updated version of  ..\wp-content\plugins\h5p\public\class-h5p-plugin.php

  • Lines 78 and 79 : include file « class-h5p-gtranslate.php »
  • Lines 1231 and after : if class GtTranslatable exists, i.e. file « class-h5p-gtranslate.php » is included, the H5P activity is added to the page with customized JSON which enables automatic localization. 

class-h5p-gtranslate.txt: the PHP file included by the updated version of class-h5p-plugin.php

  • With this code, we add the necessary gt_translate_keys which are needed to translate all the textual information in each H5P item.
  • $settings["contents"] is an array with all H5P activities.
  • The code is processing based on activity type defined in [library].
  • On line 15, we can uncomment to see the JSON of each activity and find out which JSON keys need to be translated.

Please take some time to look at this, and tell me if there is an equivalent solution without impacting H5P core plugin files.

Thanks in advance.

 

Attachments: 
Plain text icon class-h5p-gtranslate.txt
Plain text icon class-h5p-plugin.txt
otacke's picture

otacke

Mon, 05/20/2019 - 22:33

Hi atriaforever!

You should address someone of the H5P core team. I can't do anything related to the H5P core.

Best,

Oliver

BV52's picture

BV52

Tue, 05/21/2019 - 09:08

Hi atriaforever and Oliver,

I already informed the core team regarding this.

-BV52

atriaforever

Tue, 05/21/2019 - 09:36

Thanks BV52, do I follow up on this post or by another mean?

BV52's picture

BV52

Wed, 05/22/2019 - 03:23

Hi atriaforever,

I created a task in the public board so that the core team can review your code.

atriaforever

Fri, 09/13/2019 - 17:24

Hello, any progress on this? H5P have been updated, and we have to manually apply our changes, so this is not convenient for us.

BV52's picture

BV52

Mon, 09/16/2019 - 18:30

Hi atriaforever,

I wish I have good news but so far there are no updates yet.

-BV52