[candidexmedia]

Like many of us in the forum and GitHub issues, I’ve been looking for the best way to make my Publii sites multilingual. Although I haven’t yet found an efficient way of localizing my site (besides duplicating it entirely), I did stumbled upon this video today: https://www.youtube.com/watch?v=5meQKQhGBZg

Although I don’t understand the language, I was more or less able to follow along and use the script to create a toolbar to display automatic translations on my Publii site. Even though this solution might not be great for SEO, it’s a great short-term solution for me.

Here are the instructions for anyone interested…

I pasted the following code into Tools > Custom HTML > Footer:

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
function loadGoogleTranslate() {
new google.translate.TranslateElement ("google_element");
}
</script>

I then pasted the following < div > where I wanted my widget to appear. I placed mine in the footer because it was less of a headache than the navbar, but it can be placed anywhere:

<div id="google_element"></div>

And that’s it! I made some additional CSS changes as well to remove Google branding, style the < select >, and remove the top bar:

/* Remove google translate banner and branding */
.goog-te-banner-frame {
display: none; /* Remove Google banner at the top */
}

body {
position: unset !important; /* Remove space created by Google banner at the top */
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
display: none; /* Remove Google logo below language switcher dropdown */
}
.goog-te-gadget {
font-size: 0px !important;
color: transparent !important;
/* Remove "Powered by" text below language switcher dropdown */
}
.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-family: var(--body-font) !important; /* change font of language switcher dropdown to match site */
color: var(--light) !important; /* make text in dropdown white */
}

select.goog-te-combo {
padding-right: 1.2rem !important; /* reduce padding obscuring language name */
padding: .2rem .8rem; /* make lang switcher thinner */
}

select.goog-te-combo option {
background: var(--dark) !important; /* make dropdown dark */
}

@media all and (max-width:37.4375em) {
#google_element {
padding: 2rem .4rem; /* add padding when screen becomes smaller and footer items are stacked */
}

 

[candidexmedia]

The forum deleted  my div code, but it’s:

< div id=”google_element”></ div>

(remove the spaces before div)

You can also find the code here: https://github.com/GetPublii/Publii/issues/850#issuecomment-1059703636

[Bob]

@candidexmedia thanks for the tip.

PS: I’ve edited the snippet with a div, and now you can see it in the original post.

--
Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

[candidexmedia]

Bob wrote:

@candidexmedia thanks for the tip.

PS: I’ve edited the snippet with a div, and now you can see it in the original post.

Thanks Bob!

[jomocu]

Try my plugin 🙂

https://forum.getpublii.com/topic/plugin-simple-website-translator/

[candidexmedia]

jomocu wrote:

Try my plugin 🙂

https://forum.getpublii.com/topic/plugin-simple-website-translator/

Cool, I’ll give it a look. Would be great to be able to toggle which languages to display or hide from the list.

[candidexmedia]

I’ve figured out how to include only specific languages, all thanks to this comment and this article.

I’ve updated the code in the following gist with full instructions: https://gist.github.com/candidexmedia/03c0b74ca88a4bdec06cf0148d6758ad

I’ve also incorporated some of the elements from jomocu’s plugin.

[Author]

Posts