Navigation

Contactez-nous

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

Par Boris Morel (twitter accountBorisMorel) 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

Ajouter un commentaire
After looking into a number of the blog posts on your web site, I seriously like 
your technique of writing a blog. I book-marked it to my bookmark website list and will be checking back in the 
near future. Please visit my web site as well and let me know what you think.
I use this
{% 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 %}