Jump to content

Module: MarkupGoogleTranslate


Recommended Posts

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.

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

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);
	}
}

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...