Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

Par Boris Morel (

BorisMorel) Dernière mise à jour : 28 December 2012

Un language switcher Twig

Introduction

Une fois la traduction mise en place, vous pouvez être tentés de vouloir changer la langue autrement que depuis l'url. Pour ma part j'ai obpté pour un langue switcher tout en twig. Il existe biensur des tas d'autres solutions. Celle là a pour mérite d'être assez simple et de pouvoir être incluse dans le emplate de manière globale.

Définir les méthodes pour les URL

A savoir :

Les méthodes doivent être renseignées sur chaque url
le language switcher n'est affiché que sur des methodes GET

<?php

/**
 * Annotation method
 */

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method

/**
 * @Route("/new", name="application_new")
 * @Method("GET")
 * @Template()
 */
public function newAction($id)
{
    [...]
}

Template Twig du language switcher

N'oubliez pas de remplacer les liens vers les images avec des liens à vous.

<!-- _langueSwitcher.html.twig -->

{# If method is not GET the langue switcher is hidden to prevent change the url on a post action #}
{% if app.request.get('_route') and app.request.get('_method') and "GET" in app.request.get('_method').methods %}

{% set actualLangue = app.request.locale %}

{% set routeParams = app.request.get('_route_params') %}
<div class="langues">
  {% for langue in ['fr','en'] %} {# If you have a language referential you may call a controller to get all languages #}
  <div class="langue langue-{{langue}}">
   

    {% if actualLangue == langue %}
    <div class="langue-current langue-current-{{langue}}">
      <div class="flag flag-{{langue}}">
        <img src="{{ asset('bundles/imagbasecalls/images/'~langue~'.png') }}" alt="flag-{{langue}}"/>
      </div>
      <div class="iso">
        {{ langue|capitalize }}
      </div>
    </div>
    {% else %}

    {% if routeParams['_locale'] is defined %}
    {%set routeParams = routeParams|merge({'_locale': langue}) %}
    {% endif %}
    
    <div class="langue-available langue-available-{{langue}}">
      <div class="flag flag-{{langue}}">
        <a href="{{ path(app.request.get('_route'), routeParams) }}"><img src="{{ asset('bundles/imagbasecalls/images/'~langue~'.png') }}" alt="flag-{{langue}}"/></a>
      </div>
      <div class="iso">
        <a href="{{ path(app.request.get('_route'), routeParams) }}">{{ langue|capitalize }}</a>
      </div>
    </div>

    {% endif %}
  </div>
  {% endfor %}
  <div class="clear"></div>
</div>
{% endif %}

Inclure le language switcher

<!-- layout.html.twig --> 

{% block langue_switcher %}
    <div id="langue_switcher">
        {% include('IMAGBaseCallsBundle:Base:_langueSwitcher.html.twig') %}
    </div>
{% endblock langue_switcher %}

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

I use this X - 01/03/2013

{% set source_string = "/" ~ app.request.locale ~ "/" %}
{% for language in ['fr','en'] %}
    {% set target = "/" ~ language ~ "/" %}
    <div{% if language == app.request.locale %} class="selected"{% endif %}><a href="{{ app.request.requestUri|replace({(source): target}) }}">{{ language }}</a></div>
{% endfor %}

Navigation