Convertir el menú locale para cambiar idioma en uno desplegablede de Bootstrap

17 Mayo 2016
Drupal 7, Bootstrap

Cuando se desarrolla un sitio multi-idioma con Drupal utilizando el módulo core locale, automáticamente se crea un bloque llamado Language switcher que sirve al usuario para cambiar el idioma del sitio. Este bloque simplemente visualiza un vínculo para cada idioma activo como un elemento de una lista HTML.

Entre los componentes de Bootstrap se encuentra el menú desplegable (dropdown in inglés). El código HTML para su implementación es el siguiente:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Por lo tanto, para implementar este tipo de menú en Drupal será necesario modificar el código HTML del bloque Language switche.

Modificar el aspecto del bloque locale

Crear un archivo con el nombre block--locale--language.tpl.php en el directorio del tema activo que sobreescriba el markup predefinido. Para un subtema de Bootstrap la ruta sería themes/bootstrap_subtheme/theme/block/block--locale--language.tpl.php

En este archivo se tendrá que implementar el código HTML de Bootstrap.

<?php 
  global $language;
?>
<section id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <div class="dropdown">
    <a data-close-others="false" data-delay="1000" data-hover="dropdown" data-toggle="dropdown" class="dropdown-toggle" href="#">
    <span class="glyphicon glyphicon-globe"></span> <?php print $language->native; ?> <b class="caret"></b>
    </a>
<?php 
  // add bootstrap class
  $content = str_replace('<ul class="', '<ul class="dropdown-menu ', $content);
  print $content;
?>
  <div>
</section> <!-- /.block -->

Convertir el menú locale para cambiar idioma en uno desplegablede de Bootstrap

Modificar el aspecto del bloque locale

Enlaces externos