Module: MarkupGoogleTranslate

[JayGee]

I created a simple translation module for a project we're currently working on and I thought I would share it in case it's useful for anyone else as it's a request we've come across a few times recently. It's a basic page translation module using Google Translate to replace their now retired embeddable page translation widget.

The module outputs a simple, un-styled, dropdown language selector that routes the visitor to a translated version of the current page via translate.google.com. From there you can then navigate the whole site in the your language of choice. There's also a method to output a single language-specific translation URL for any supported language using the language ISO code.

Download, usage and supported language list available on my Github here: https://github.com/mrjcgoodwin/MarkupGoogleTranslate

Caveat 1: Google seem to be trying to encourage use of their Google Translation API, so the continued working of this module is completely at their mercy - I can imagine they may discourage this usage at some point, but who knows!

Caveat 2: I haven't yet deciphered what all the parameters are used for in the constructed Google Translate URL. It's possible there may be some sites/scenarios where the URL doesn't work. Feel free to report if you find any issues.

[BrendonKoz]

Although you can no longer signup for a new account to use the embedded Google Translate widget, you can still take advantage of it. I'll provide my solution should it be useful to anyone else. Having multiple options, depending on need, can be useful.

<div id="google_translate_element"></div>
  
<!-- Google Translate -->
<script type="text/javascript">
	function googleTranslateElementInit() {
		new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
	}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

I've used this CSS to style it from its default, while still providing the (likely) required credit to its tool.

#google_translate_element .skiptranslate {
	visibility:collapse;
	text-align:center;
	position:absolute;
	width:100%;
	width:calc(100% - 4rem);
	top:0;
}
#google_translate_element .skiptranslate * {
	margin:0 auto;
	display:block;
}
#google_translate_element .skiptranslate [id*=targetLanguage] {
	visibility: visible;
}
#google_translate_element .skiptranslate [id*=targetLanguage] select {
	border:1px solid rgba(0,0,0,.2);
	background-color:#F4F6F7;
	color:rgba(0,0,0,.7);
}
#google_translate_element .skiptranslate [id*=targetLanguage] select option {
	background-color:transparent;
}
#google_translate_element [id*=targetLanguage]::after {
	content:'Powered by Google Translate';
	display:block;
	text-align:center;
	line-height:1;
	color:rgba(0,0,0,.6);
}
@media(max-width:575px){
	#google_translate_element .skiptranslate {
		width:calc(100% - 2rem);
	}
}

 

[JayGee]

Thanks @BrendonKoz this is useful to know/have.

The reason I create the little module above is because we were told that Google's own widget version was going to be completely removed and that the deadline for this was only extended due to Covid. We had a few sites reliant on it, so wanted a fall back.

It will be interesting to see whether the original widget stops working on not.

[BrendonKoz]

Ah, that's more than I knew. In that case this is good for me to know about too! Thanks for that, and for your module solution!

[JayGee]

@Cybermano ?  - thanks for the PR on this module. Will check this out over the next few days ?

[Cybermano]

16 hours ago, Guy Incognito said:

@Cybermano ?  - thanks for the PR on this module. Will check this out over the next few days ?

Hi Guy Incognito,

Thanks for your work, it works well and is really useful in some cases.

I've added PR to implement module configuration for two reasons:

1. the url passed to google in your code has a starting language set to "en" (obviously this fits your needs perfectly);
2. the drop-down list with all languages is too long (in my opinion).

My idea was to give the possibility to set the starting language according to the default language of the pw site (which in my case is Italian and the first url gave me an error translating other languages because google received English as first language to translate from and not Italian).

For the second point, I think that for many users the complete list of languages is superfluous: I would limit the drop down list to only a few languages. I've added an InputfieldAsmSelect in the module config to allow admins to choose only the languages they need.

Here's what the form looks like now:

And what the selection looks like on the frontend:

N.B. For this AsmSelect I have encountered some difficulty in front-end rendering the options as value=>label for languages: I made a workaround by calling a flipped array of your availableLanguages() method.

Does anyone here know how to pass an AsmSelect option as a value=>label pair? I tried with

foreach ($this->custom_languages as $code => $title) {
  $url = $this->buildGoogleTranslateUrl($code);
  $options .= '<option value="'.$url.'">'.$title.'</option>';
}

but in this case on the front-end I have an indexed array like [0=>language1,1=>language2, and so on...]

So I bypassed with a flipped array

foreach ($this->custom_languages as $code) {
  $url = $this->buildGoogleTranslateUrl($code);
  $options .= '<option value="'.$url.'">'.$this->available_flipped($code).'</option>';
}

Any suggestion is welcome.

P.S. The forked module is available here:
https://github.com/cybermano/MarkupGoogleTranslate

 

 

Edited April 28, 2023 by Cybermano
typos editing

[Cybermano]

I was playing a bit... ?

Added configurable options to show Google Translate product icon, wrap the icon (if enabled) and the select into a single div, styling classes to pass either to the DIV and to the SELECT, customizable label for the first option of the select and restored specific translations as override passing array of language codes (from one to multiple).

 

 

 

Edited April 28, 2023 by Cybermano
image changed for typos and minor upgrades

[Cybermano]

Milestone - Release Candidate

Templates and page ids override and Native language names.

Native languages in front end list to enhance UX

Edited May 4, 2023 by Cybermano
Upgrade V0.1.1

[JayGee]

Hi @Cybermano - just to let you know I've seen your continued hard work on this module ? which is awesome! I'm pretty sure it's all a million times better than my implementation but I've been so busy at work last few weeks I've not had a chance to review it all. I'll make sure I'm onto it this weekend and merge it all in.

 

P.s. as you can see from my GH my real name isn't Guy (it was an obscure Simpsons reference)... I might change my name on here as it feels really silly otherwise ??

[Cybermano]

On 5/12/2023 at 5:46 PM, Guy Incognito said:

Hi @Cybermano - just to let you know I've seen your continued hard work on this module ? which is awesome! I'm pretty sure it's all a million times better than my implementation but I've been so busy at work last few weeks I've not had a chance to review it all. I'll make sure I'm onto it this weekend and merge it all in.

 

P.s. as you can see from my GH my real name isn't Guy (it was an obscure Simpsons reference)... I might change my name on here as it feels really silly otherwise ??

Hi Jonathan,

thank you for your inspiration ?! Actually lot of the commits are for typos fixes.?

I think I've just finished do add the last stuffs (overrides and few minor things), and I attach the last screenshot.

Maybe my code could look a bit messy, but I've tested it many times and It seems to work fine (even if something could be too verbose).

Don't worry if you are busy: take your time and let me know if there is something wrong or unclear.

P.S. Sorry for my bad English, feel free to change every labels/descriptions/notes/comments in the config.

 

Edited May 23, 2023 by Cybermano
Image updated for few module upgrade

[JayGee]

Hey @Cybermano ? ... remember me! ?

Sorry had a crazy few weeks at work and then a holiday, but finally got around to reviewing your great contributions on this module. I tested it and everything looks great. I merged your changes and also combined our readme files and added a thanks note/credit for you too ?

Thanks again - you've taken this module way beyond where I originally planned.

Only comment is I noticed when you first install it, the module will error on the front end because no languages are selected. I guess this is obvious when you think about it, but wonder if we should make that a compulsory field or pre-populate with at least one language?

Thanks
J

(Finally changed my name on here too lol)

[Cybermano]

Hi @JayGee, of course yes!

Thanks for all and don't worry: you did well to take a break after a hard work.

I am very happy to have been useful: as soon as I can I check the error in the front end, but as you said I think it is possible to avoid it by assigning default values during module init.

I'll get back to you shortly!

Bye!

[Cybermano]

On 6/19/2023 at 10:42 PM, JayGee said:

Hey @Cybermano ? ... remember me! ?

Sorry had a crazy few weeks at work and then a holiday, but finally got around to reviewing your great contributions on this module. I tested it and everything looks great. I merged your changes and also combined our readme files and added a thanks note/credit for you too ?

Thanks again - you've taken this module way beyond where I originally planned.

Only comment is I noticed when you first install it, the module will error on the front end because no languages are selected. I guess this is obvious when you think about it, but wonder if we should make that a compulsory field or pre-populate with at least one language?

Thanks
J

(Finally changed my name on here too lol)

Hello, I'm back ... I spent a week of full immersion at work.

I fixed the installation error (and pulled a request on GitHub). It was a bad condition in a public function. Sorry, I had missed it.

P.S.

Please, check your part of read.me (more or less, at line 14)
 

 ```<?php echo buildGoogleTranslateUrl('es');?>```

Do you mean calling the function from the module as:

 ```<?php echo $translate->buildGoogleTranslateUrl('es');?>```

 

[JayGee]

Hey - I know how you feel, work is busy here too!

I think you're right about the readme, I will update thank you. ?