Carnet Wiki

MenuLangSurClic

Version 17 — Décembre 2009 erational

Changer de langue sur un clic sans passer par le menu_lang

dans le contexte $forcer_lang=true Le #MENU_LANG permet d’afficher un selecteur de langue sous forme de menu select (dropmenu) qui est en fait un formulaire qui permet de poser un cookie lang.

cette contribution permet d’avoir la même fonctionnalité sur un simple lien hypertexte grâce à jquery

Mise en place squelette

  • on affiche #MENU_LANG pour avoir le formulaire (on le masque dynamiquement
  • on crée des liens hypertextes en indiquant le suffixe de langue dans l’attribut rel et on leur applique la classe cookie_lang

syntaxe

<a href="lien_pour_non_js" rel="code_lang" class="cookie_lang">cliquer pour changer de langue</a>

exemple

#MENU_LANG
<ul id="nav-lang">
 <li><a href="[(#URL_PAGE{sommaire}|parametre_url{'lang','pt'})]" rel="pt" class="cookie_lang [(#LANG|=={pt}|?{'on',''})]">Português</a></li>
 <li><a href="[(#URL_PAGE{sommaire}|parametre_url{'lang','en'})]" rel="en" class="cookie_lang [(#LANG|=={en}|?{'on',''})]">English</a></li>
 <li><a href="[(#URL_PAGE{sommaire}|parametre_url{'lang','fr'})]" rel="fr" class="cookie_lang [(#LANG|=={fr}|?{'on',''})]">Français</a></li>
</ul> 

et on appelle une petite fonction javascript jquery non obstructif

// menulang sur clic  
// author : erational <http://www.erational.org>
$(document).ready(function(){
    $(".formulaire_menu_lang").hide();     // on cache le menu_lang
    
    $(".cookie_lang").click( function() {  // sur les liens qui possedent la classe cookie_lang, on pose le cookie de leur attribut rel.
        var lang = $(this).attr("rel");
        $(".formulaire_menu_lang form option").removeAttr("selected");
        $(".formulaire_menu_lang form option[@value='"+lang+"']").attr("selected","selected");
        $(".formulaire_menu_lang form").submit();
        return false;
    });
        
});

-  Erational / mai 2008 / sur spip 192d et $forcer_lang=true


-  Alexandra mai 2008

On peut aussi utiliser la méthode de kent1 en full SPIP et sans js :

[(#URL_ACTION{'converser'}|parametre_url{var_lang,[(#ENV{lang}|=={fr}|?{'en','fr'})]}|parametre_url{redirect,#SELF})]

Ca fait la même chose mais en une seule ligne ;)
-  Aurais tu la référence de ce code ? il ne fonctionne pas et il n’est documenté nul part.. s’agit il de #URL_ACTION_AUTEUR. merci

-  Alexandra octobre 2008 En fait il fonctionne en SVN uniquement. Il est parfait pour deux langues, après y a risque que se soit plus aléatoire. Pour un petit lien cf : http://www.annelauremaison.com/sque...

-  Potter64, 23 Avril 2009 :

<BOUCLE_langues(ARTICLES){par lang}>
[<span lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"[ (#LANG|=={#ENV{lang}}|?{class="on",''})]>
	<a href="[(#URL_ACTION_AUTEUR{'converser',[(#ENV{lang}|=={fr}|?{'en','fr'})]&var_lang=#LANG,[(#SELF|parametre_url{lang,''})]})]" rel="alternate" hreflang="(#LANG|unique{langues})" title="[(#LANG|traduire_nom_langue)]">
		#LANG
	</a>
</span>]
</BOUCLE_langues>

est très joli en SPIP 2

Sinon un post et une méthode très interessante de Fil postée sur la la liste SPIP-EN
http://article.gmane.org/gmane.comp...

<BOUCLE_langues(ARTICLES){fusion lang}{par lang}>
<a rel="alternate" hreflang="#LANG"
href="[(#REM|sinon{spip.php?action=cookie}|parametre_url{var_lang,#LANG})]&url=<?php
echo urlencode(self()); ?>">[(#LANG|traduire_nom_langue)]</a>
</BOUCLE_langues>

Bonjour, ayant cherché trop longtemps à mon gout, j’apporte ma pierre à l’édifice (basé sur le code au-dessus) ;

 [(#LANG|=={fr}?{<li><a href="[(#URL_ACTION{'converser'}|parametre_url{var_lang,'en'}|parametre_url{redirect,#SELF})]" title="English"><img src="<:chemin_drap_en:>" height="13" width="21" /></a></li>})] 
      [(#LANG|=={en}?{<li><a href="[(#URL_ACTION{'converser'}|parametre_url{var_lang,'fr'}|parametre_url{redirect,#SELF})]" title="Français"><img src="<:chemin_drap_fr:>" height="13" width="21" /></a></li>})]

Birdy, 10.2009 :
un mix des codes précédents pour avoir et le nombre de langue dynamique, les images, les liens pas seulement simple bascule fr/en.. et qui fonctionne effectivement sous SPIP 2 :

<BOUCLE_langues(ARTICLES){fusion lang}{par lang}>
[<span lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"[(#LANG|=={#ENV{lang}}|?{class="on",''})]>
	<a href="[(#URL_ACTION{'converser'}|parametre_url{var_lang,#LANG}|parametre_url{redirect,#SELF})]"
		rel="alternate" hreflang="(#LANG|unique{langues})" title="[(#LANG|traduire_nom_langue)]"><img src="images/flag_#LANG.gif" height="13" width="21" /></a>
</span>]
</BOUCLE_langues>

Soon7, 11.2009
Je viens de tester la boucle de Birdy sur un site multilingue et ça marche du feu de dieu.
Il faut juste penser à créer les petites images de drapeaux des langues bien entendu.
D’autre part, afin de ne pas afficher le drapeau de la langue courante, dans le fichier css un petit :

span.on{display:none;}

fait très bien l’affaire.

Autre chose : Afin d’afficher devant le drapeau une chaine de fichier de langue (c’est à dire de la forme <:toto :> dans le squelette avec toto défini dans le tableau $GLOBALS[$GLOBALS[’idx_lang’]] = array(
’toto’ => ’traduction de toto dans la langue du fichier’,...

il faut rajouter le critere lang_select, ce qui donne au final

<BOUCLE_langues(ARTICLES){fusion lang}{par lang}{lang_select}>
[<span lang="#LANG" xml:lang="#LANG" dir="#LANG_DIR"[(#LANG|=={#ENV{lang}}|?{class="on",''})]>
        <a href="[(#URL_ACTION{'converser'}|parametre_url{var_lang,#LANG}|parametre_url{redirect,#SELF})]"
                rel="alternate" hreflang="(#LANG|unique{langues})" title="[(#LANG|traduire_nom_langue)]"><:traduction:> <img src="images/drapeau-#LANG.gif" height="13" width="21" alt="#LANG" align="top" /></a>
</span>]
</BOUCLE_langues>

avec dans mon cas 2 fichiers langues dans mon répertoire squelettes/lang :local_fr.php et local_en.php contenant respectivement

<?php
$GLOBALS[$GLOBALS['idx_lang']] = array(
...
	'traduction' => 'Lire cet article en Français'
);
?>

et dans la version anglaise

<?php
$GLOBALS[$GLOBALS['idx_lang']] = array(
...
	'traduction' => 'English Version of this article'
);
?>

switch avec on non lien de traduction

encore une variante pour SPIP 2 - erational - 2009.12 :

  • s’il y a un id_article on chercher les traductions
    • s’il n’y pas de traduction ou id_article, on affiche le switcher de langues classiques
  • s’il n’y pas id_article, on affiche le switcher de langues classiques

cela donne pour un site fr,en, es

          <ul>
          <BOUCLE_getA(ARTICLES){id_article}>
            <BOUCLE_article_trad(ARTICLES){traduction}{exclus}>
            <li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,#LANG}|parametre_url{redirect,#URL_ARTICLE})]" rel="alternate" hreflang="#LANG" title="[(#LANG|traduire_nom_langue)]"><img src="#CHEMIN{img/flag_#LANG.png}" alt="[(#LANG|traduire_nom_langue)]" /></a></li>
            </BOUCLE_article_trad></B_article_trad>
            [(#LANG|=={fr}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,fr}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="fr" title="francais" class="[(#ENV{lang}|=={fr}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_fr.png}" alt="Françcais" /></a></li>]
            [(#LANG|=={en}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,en}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="en" title="english"  class="[(#ENV{lang}|=={en}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_en.png}" alt="English" /></a></li>]
            [(#LANG|=={es}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,es}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="es" title="español"  class="[(#ENV{lang}|=={es}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_es.png}" alt="Español" /></a></li>]
            <//B_article_trad>
          </BOUCLE_getA></B_getA>
            [(#LANG|=={fr}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,fr}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="fr" title="francais" class="[(#ENV{lang}|=={fr}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_fr.png}" alt="Françcais" /></a></li>]
            [(#LANG|=={en}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,en}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="en" title="english"  class="[(#ENV{lang}|=={en}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_en.png}" alt="English" /></a></li>]
            [(#LANG|=={es}|non)<li><a href="[(#URL_ACTION{converser}|parametre_url{var_lang,es}|parametre_url{redirect,#SELF})]" rel="alternate" hreflang="es" title="español"  class="[(#ENV{lang}|=={es}|?{'on','flag'})]"><img src="#CHEMIN{img/flag_es.png}" alt="Español" /></a></li>]
          <//B_getA>
          </ul>