How to disable image link when site toggles to other language?

Question

I'm trying to disable an image link when the site navigates out of the original language. Its wordpress and I'm using Polylang to translate. The site is in Portuguese, English, Deutsh and French. I have a widget that is located in a common wrap no matter the language. That widget shows images with links to a pop-up commanded with a plugin that uses a class (class="modal-link") can't disable that class because it will break links in other pages. I need the links to disable when switching to English/Deutsh/French.

The code in the widget is like this:

<a class="modal-link" href="http://moldetefa.com/wp2018/index.php/pt2020/">
<img border="0" alt="Centro2020" src="http://moldetefa.com/wp2018/wp- 
content/uploads/2018/08/c2020.png"></a>
<a class="modal-link" href="http://moldetefa.com/wp2018/index.php/pt2020/">
<img border="0" alt="Portugal2020" src="http://moldetefa.com/wp2018/wp- 
content/uploads/2018/08/pt_2020.png"></a>
<a class="modal-link" href="http://moldetefa.com/wp2018/index.php/pt2020/">
<img border="0" alt="FEDR" src="http://moldetefa.com/wp2018/wp- 
content/uploads/2018/08/FEDR.png"></a>

This CSS works but I don't know how to call it just in a specific language

[href="http://moldetefa.com/wp2018/index.php/pt2020/"]{
pointer-events: none;
}

This CSS works for doing things under that language only, but I don't know how to write the code to disable that specific link.

:lang(en)   {

}

Just done this and it worked ! :O

:lang(en) > [href="http://moldetefa.com/wp2018/index.php/pt2020/"]{
pointer-events: none;
}   

Any thoughts? Thank's JF

Answer 1

What you can try, inside your functions.php file add a small function to check the current language and return something:

function check_languages($pt, $fr, $en, de) {
    $cuurent_language = get_locale();
    if($cuurent_language == 'pt_PT'){
        return $pt;
    }
    if($cuurent_language == 'fr_FR'){
        return $fr;
    }
    if($cuurent_language == 'en_GB'){
        return $en;
    }
    if($cuurent_language == 'de_DE'){
        return $de;
    }
}

Since there are more than 1 locale for English, French etc. you can check you current version of the chosen language inside Polilang - http://joxi.ru/Vm6ZjvEHDqeMkm and replace it in this example function if needed. Once you have this function added you can use it like:

<a class="<?=check_languages('modal-link', '', '', '');?>" href="http://moldetefa.com/wp2018/index.php/pt2020/">
<img border="0" alt="Centro2020" src="http://moldetefa.com/wp2018/wp- 
content/uploads/2018/08/c2020.png"></a>

So for Portuguese you'ill have modal class added, for the rest of the languages - nothing or whatever class you place. Another option I can think of is to use Polilang string translation (better than a custom function, if you have lots of strings in your templates that need to be translated) and register a string like:

<a class="<?pll_e('modal-link');?>" href="http://moldetefa.com/wp2018/index.php/pt2020/">
<img border="0" alt="Centro2020" src="http://moldetefa.com/wp2018/wp- 
content/uploads/2018/08/c2020.png"></a>

After this inside your string translation in Polilang you'll leave the class only for the Portuguese language. If you want to try with jQuery, at the end of your homepage template file add this:

<script>
    if($('html').attr('lang') !== 'pt-PT'){
      $(".modal-link").css("pointer-events", "none !important");
    }
<\script>