Google Translate WordPress Blog Widget Positioning Tutorial

Google Translate WordPress Blog Widget Positioning Tutorial

When we last upgraded our WordPress_.org website from 4.1.1. to 6.6.2 the Widget section CSS arrangements, barring the installation of a WordPress plugin to backtrack, caused WordPress to start CSS styling the widget area via a new “block” paradigm.

This “block” paradigm seems to have rearranged a non-mobile user’s view of a Google Translate view of one of our WordPress blog posting webpages, translated from English to another language.

Rather than fight this, we want to …

• stop “fight and flight” base thinking …
• think more, fitting in … it takes less time … and improves your skills solving problems, we believe

What happens here with non-mobile Google Translate webpage translation scenarios, it starts putting all but our Numerical Quiz (maybe because it is narrower, and we are talking Responsive Design with all of this) Widget components down the bottom of the screen. To us, “above the fold” beats an y Responsive Design niceties here. We, at least, want the Search form and Recent Posts widgets to appear to the right and above the fold, predominantly, here, for non-mobile platforms.

Yesterday’s Google Translate WordPress Blog Image URL Fix Tutorial taught us (big time) where to intervene, in our WordPress blog’s TwentyTen theme’s header.php code, we started applying …

<?php echo ”

function laterimg() {
var imgi = document.getElementsByTagName('img');
for (iyt=0; iyt<imgi.length; iyt++) {

if (iyt == 0) {
if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (document.getElementById('text-2') && document.getElementById('searchform') && document.getElementById('recent-posts-2')) {
var gtrectis=document.getElementById('text-2').getBoundingClientRect();
//document.getElementById('text-2').style.height='' + ('' + eval(-10 + eval('' + gtrectis.height))) + 'px';
var gsfis=document.getElementById('searchform').getBoundingClientRect();
document.getElementById('searchform').style.position='absolute';
document.getElementById('searchform').style.left='' + eval(-7 + eval('' + gtrectis.left)) + 'px';
document.getElementById('searchform').style.top='' + eval(-10 + 36 + eval('' + gtrectis.bottom)) + 'px';
document.getElementById('searchform').style.backgroundColor='yellow';
document.getElementById('recent-posts-2').style.position='absolute';
document.getElementById('recent-posts-2').style.left='' + gtrectis.left + 'px';
document.getElementById('recent-posts-2').style.top='' + eval(-10 + 24 + eval('' + gtrectis.bottom) + eval('' + gsfis.height)) + 'px';
document.getElementById('recent-posts-2').style.listStyleType='none';
document.getElementById('recent-posts-2').style.backgroundColor='#F0F8FF';
}
}
}

if (('' + top.document.URL).indexOf('rjmprogramming-com-au') != -1) {
if (('' + imgi[iyt].src).indexOf('&u=//') != -1) {
imgi[iyt].src=imgi[iyt].src.split('&u=')[1];
}
}
}
}

“; ?>

Previous relevant Google Translate WordPress Blog Image URL Fix Tutorial is shown below.

Google Translate WordPress Blog Image URL Fix Tutorial

Further to Google Translate Landing Page Changed Interfacing Links Tutorial we’re revisiting Google Translate “translation of WordPress blog webpage” translation functionality, finding some images getting non RJM Programming “src” properties, oddly. We do not remember this, but interfacing rules can change, of course, and it’s been a while?!

We think, perhaps, too, we were more often than we were needing to, asking for a translation of …


https://www.rjmprogramming.com.au/ITblog/


… content, and this is usually not the most apt translation to attempt. The permalink WordPress blog URLs are going to be the usual case, and we can find their ?p=[pId] equivalent (and helpful plugged into the Google Translate window.top URL) can be gleaned as the first mention in document.body.innerHTML of …


<div id="post-[pId]">


… via Javascript code like …

<?php

function ChangeLcode2Now(val){
//var val = document.getElementById('x2language');
//alert(val.value);
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
//alert(val.value);
var pprefix = ('' + val[val.selectedIndex].id);
var postns=top.document.body.innerHTML.split('<div i' + 'd="post-');
if (eval('' + postns.length) > 1) {
pprefix=postns[1].split('"')[0]; //alert(pprefix + ' ' + postns[1].split('"')[0]);
//window.open('https://www-rjmprogramming-com-au.translate.goog/ITblog/?p=' + postns[1].split('"')[0] + '&_x_tr_sl=en&_x_tr_tl=' + val.value + '&_x_tr_hl=en-GB&_x_tr_pto=nui', '_blank', 'top=50,left=50,width=800,height=800');
}
<?php
$p316 = "316";
$pprefix = "";
if (strpos($_SERVER['QUERY_STRING'], "p=0") !== false) {
$pprefix = "";
} else {
if (isset($_GET['p'])) {
if (strpos($_GET['p'], "304") !== false) {
$p316 = "316";
} else {
$p316 = $_GET['p'];
}
}
//echo "window.location = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2FITblog%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
if (1 == 1) { // _x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en-GB&_x_tr_pto=nui
echo " window.location = 'https://www-rjmprogramming-com-au.translate.goog/ITblog?p=' + pprefix + '&_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value + '&_x_tr_pto=wapp'; " . "\n";
} else {
echo "window.location = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2FITblog%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
}
}
?>
//window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress&tl=' + val.value, '_blank');
//alert("yes" + val.value);
}
}


With all this, we now fix the HTML img elements sometimes getting a Google Translate related URL via the new Javascript code snippet in the WordPress blog’s TwentyTen theme’s header.php via a delayed call of …

<?php echo ”

function laterimg() {
var imgi = document.getElementsByTagName('img');
for (iyt=0; iyt<imgi.length; iyt++) {
if (('' + top.document.URL).indexOf('rjmprogramming-com-au') != -1) {
if (('' + imgi[iyt].src).indexOf('&u=//') != -1) {
imgi[iyt].src=imgi[iyt].src.split('&u=')[1];
}
}
}
}

“; ?>

Previous relevant Google Translate Landing Page Changed Interfacing Links Tutorial is shown below.

Google Translate Landing Page Changed Interfacing Links Tutorial

Onto yesterday’s Google Translate Landing Page Changed Interfacing Tutorial we wanted to extend the functionality, given user intervention, that other links on the Landing Pages can be sent to Google Translate for webpage translation.

We decided to …

Feel free to try, coming off a new “(everywhere)” appended dropdown option a user can select!

Previous relevant Google Translate Landing Page Changed Interfacing Tutorial is shown below.

Google Translate Landing Page Changed Interfacing Tutorial

It pays to keep in touch with third party arrangements you have in place, as for the recent Google Translate Landing Page Translate Updated List Tutorial‘s interfacing to the great Google Translate resource capable of translating our RJM Programming blog (via Landing page language dropdown (select) element up the top right) to non-English languages.

But two interfacing to Google Translate aspects have changed since we had occasion to “see how this was going” (oops!) …

1. enforcing https: protocol … and …
2. extra &_x_tr_pto=wapp to arguments … as per old versus new Landing Page Javascript code arrangements …
   
function oldChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
}
//]]>
}


function ChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('https://www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value + '&_x_tr_pto=wapp', '_blank');
}
//]]>
}


… linking the user picking a non-English language off the dropdown element be able to translate that day’s latest RJM Programming blog post into that language via Google Translate. Thanks heaps!

Previous relevant Google Translate Landing Page Translate Updated List Tutorial is shown below.

Google Translate Landing Page Translate Updated List Tutorial

Yesterday’s Google Translate Landing Page Translate Update Tutorial left off with …

It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.

… and that new day is upon us. Whenever you combine …

• PHP writing public HTML webpage data … with …
• a user interface (and we’d really only like that “user set” to be an administrator of this blog)

… it’s a potential data security issue you are opening up, and yet, we do want to involve some automation of webpage code here for something that can be ascertained. So let’s try to protect ourselves (to some degree) regarding the PHP below …

<?php

if (isset($_POST['langih']) && strpos(strtolower('' . $_SERVER['HTTP_REFERER']), "rjmprogramming.com.au/about_us.html") !== false) {
$prefis="./";
$ftf=["index.htm","index.html","indexmobile.html","About_Us.html","Contact_Us.html","Guestbook.html","Link.html","Links.html","Services.html","Welcome.html","News.html","Welcome.htm","Welcomeslideshow.htm","Welcomeslideshow.html","slideshow.html"];
$lih=str_replace("+", " ", urldecode($_POST['langih']));
if (strpos("~" . strtolower($lih), "~<option") !== false) {
if (strpos(strtolower($lih) . "~", "</option>~") !== false) {
if (strpos($lih, ">Blog Language") !== false) {


for ($i=0; $i<sizeof($ftf); $i++) {
if (file_exists($prefis . $ftf[$i])) {
$cont=file_get_contents($prefis . $ftf[$i]);
if (strpos($cont, ">Blog Language") !== false) {
if (strpos(str_replace("<option","",str_replace("</option>","",strtolower($lih))), "<") === false) {
if (strlen(explode("</select>", explode(">Blog Language", $lih)[1])[0]) > strlen($wasis)) {
if (sizeof(explode(">",explode("</select>", explode(">Blog Language", $lih)[1])[0])) >= sizeof(explode(">",$wasis))) {
file_put_contents($prefis . $ftf[$i] . "_spare", $cont);
$wasis=explode("</select>", explode(">Blog Language", $cont)[1])[0];
$contnew=str_replace($wasis, explode("</select>", explode(">Blog Language", $lih)[1])[0], $cont);
file_put_contents($prefis . $ftf[$i], $contnew);
}
}
}
}
}
}

}
}
}
}
exit;

?>

… restricting calling URLs and some of the look and size and content of the posted data, and working with the “About Us” webpage “place” to automate, the idea of choosing “English” from the “Blog Language” dropdown, as per the changed Javascript and Ajax “way in” …


function ChangeLcodeNow(){
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
} else if (val.value.length != 0 && val.value.indexOf('en') != (0 - 1)) {
if (ajaxitp) { ajaxitp(); }
}
}

function ajaxitp() {
var xurl = './getme.php';
var formis = new FormData();
myxhr = new XMLHttpRequest();
if (myxhr) {
formis.append('langih', document.getElementById('language').innerHTML);
myxhr.open('POST', xurl); //, true);
myxhr.send(formis);
}
}


Previous relevant Google Translate Landing Page Translate Update Tutorial is shown below.

Google Translate Landing Page Translate Update Tutorial

The recent Google Translate Landing Page Translate Tutorial …

• updated our “interface” to the great Google Translate strategy for the RJM Programming Landing Page webpage group … but …
• did not update to the latest “language code list” to the great Google Translate for the RJM Programming Landing Page webpage group

… and so, we are here today, with our start to remedies for this (Javascript DOM, via Ajax, change below) …


var myxhr=null;

function backin() {


if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
if (myxhr.responseText) {
if (document.getElementById('language')) {
//alert(myxhr.responseText);
var mhs=myxhr.responseText.replace(/\<\/code\>\<\/td\>/g,'<>').split('><code translate="no" dir="ltr">');
if (mhs.length > 1) {
var thiscodeis='', thisdescis='';
var wasih=document.getElementById('language').innerHTML;
var outih=wasih.split('</option>')[0] + '</option>';
var origih=wasih.replace(outih, '');
for (var iuh=1; iuh<mhs.length; iuh++) {
thisdescis=mhs[eval(-1 + iuh)].split('<td>')[eval(-1 + mhs[eval(-1 + iuh)].split('<td>').length)];
//console.log('first thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
thisdescis=thisdescis.split('<')[0];
thiscodeis=mhs[iuh].split('<')[0].split('(')[0].trim();
//console.log('thiscodeis=' + thiscodeis + ' and thisdescis=' + thisdescis + ' and mhs[eval(-1 + iuh)]=' + mhs[eval(-1 + iuh)].slice(-200));
if (wasih.toLowerCase().indexOf(' value="' + thiscodeis.toLowerCase() + '"') == -1 && wasih.toLowerCase().indexOf(thisdescis.toLowerCase()) == -1) {
outih+='<option value="' + thiscodeis + '">' + thisdescis + ' &#10024;</OPTION>';
} else {
outih+='<option value="' + thiscodeis + '">' + thisdescis + '</OPTION>';
}
}
if (outih.indexOf('/OPTION') != -1 && origih.toLowerCase() != outih.toLowerCase()) {
document.getElementById('language').innerHTML=outih.replace('</option>', ' &#10024;</OPTION>');
document.getElementById('language').style.maxWidth='150px';
}
}
}
}
}
}
}

function ajaxit() {
var xurl = '//cloud.google.com/translate/docs/languages';
//alert(1);
myxhr = new XMLHttpRequest();
if (myxhr) {
//alert(2);
myxhr.onreadystatechange = backin;
myxhr.open('GET', 'getme.php?getme=' + encodeURIComponent(xurl), true);
myxhr.send(null);
}
}

function refreshl() {
if (document.getElementById('language')) {
ajaxit();
}
}

setTimeout(refreshl, 5000);


It’s the start that does not ingrain the webpage HTML to any great permanence, and that is for another “PHP involvement” day.

Previous relevant Google Translate Landing Page Translate Tutorial is shown below.

Google Translate Landing Page Translate Tutorial

Yesterday’s …

• Google Translate Webpage Translate Tutorial was the major part of RJM Programming’s Google Translate strategy change (ie. getting it working again … doh!) … but it’s not the whole story … and another part is …
• today we extend that strategy to change the RJM Programming Landing Page Google Translate interfacing to change from a “Landing Page content” strategy to a “Navigate to WordPress Blog” strategy (feeding into yesterday’s thinking), our justification being that the better content of the RJM Programming domain sits within the WordPress Blog we support and maintain

… so there, ngarrrrgh!

But (growing up quickly) we see a better arrangement here, just adding the prefix “Blog” onto the old (just) “Language” labelled dropdown to modify the “new “Blog Language” (to end up with HTML snippet <option value=””>Blog Language</option>) dropdown’s Javascript “onchange” event logic …


// To ...
function ChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
var dd=new Date();
window.open('//www-rjmprogramming-com-au.translate.goog/ITblog/' + dd.getFullYear() + '/' + ('0' + eval(1 + eval('' + dd.getMonth()))).slice(-2) + '/' + ('0' + eval(0 + eval('' + dd.getDate()))).slice(-2) + '/?_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_blank');
}
//]]>
}


// ... From ...
function olderChangeLcodeNow(){
//<![CDATA[
var val = document.getElementById('language');
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
var pprefix = val[val.selectedIndex].id;
windowopen('http://translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Findex.html&tl=' + val.value, '_blank');
}
//]]>
}


Again, not too onerous!

Previous relevant Google Translate Webpage Translate Tutorial is shown below.

Google Translate Webpage Translate Tutorial

We really like the way Google Translate can language translate whole webpages for URLs of choice, sometimes. We use it here at this blog, but sometime into the past … we cannot recall (sorrrrrryyyyyyyyy!) … the arrangements of use of this great functionality changed, and today we want to go over what we did for this blog to fix some of this interfacing.

It was in good ol’ WordPress TwentyTen theme’s header.php we made the change to facilitate this “reconnection” to this great functionality …

<?php

function ChangeLcodeNow(){
var val = document.getElementById('language');
//alert(val.value);
if (val.value.length != 0 && val.value.indexOf('en') == (0 - 1)) {
//alert(val.value);
var pprefix = val[val.selectedIndex].id;
<?php
$p316 = "316";
$pprefix = "";
if (strpos($_SERVER['QUERY_STRING'], "p=0") !== false) {
$pprefix = "";
} else {
if (isset($_GET['p'])) {
if (strpos($_GET['p'], "304") !== false) {
$p316 = "316";
} else {
$p316 = $_GET['p'];
}
}

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
}
if ($isiPad === false) {
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
}

if (1 == 1) { // _x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en-GB&_x_tr_pto=nui
echo " window.open('//www-rjmprogramming-com-au.translate.goog/ITblog?p=' + pprefix + '&_x_tr_sl=en&_x_tr_hl=en-GB&_x_tr_pto=nui&_x_tr_tl=' + val.value, '_top'); " . "\n";
} else {
if ($isiPad) {
//echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
echo " window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value, '_top'); " . "\n";
} else {
//echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
echo "window.location.href = '//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress%2F%3Fp%3D' + pprefix + '".$p316."&tl=' + val.value; " . "\n";
}
}
}
?>
//window.open('//translate.google.com/translate?sl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.rjmprogramming.com.au%2Fwordpress&tl=' + val.value, '_blank');
//alert("yes" + val.value);
}
}

?>

Not too bruising!

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.