Cómo personalizar el selector de idiomas en Drupal

Drupal 8 mejoró dramáticamente las capacidades para crear sitios web multilingües. La traducción del contenido se trasladó al núcleo y una arquitectura mejorada facilitó mucho la internacionalización de sitios complejos. Sin embargo, el conmutador de idiomas podría funcionar con algunas mejoras. Así es como lo personalizamos.

Como agencia digital con orígenes catalanes, nos hemos acostumbrado a tener dos idiomas de conducta: español, catalán (y ahora inglés). Cambiamos de un lado a otro sin siquiera notarlo y hemos aprendido a leer, escribir y hacer negocios en ambos idiomas sin esfuerzo. Nuestros clientes son en su mayoría españoles, pero muchos atienden a una audiencia internacional u operan más allá de las fronteras, por lo que ahora hay bastantes sitios web multilingües en nuestra cartera.

A pesar de las posibles complejidades que pueden presentar los sitios web multilingües, Drupal siempre ha sido notoriamente firme acerca de la compatibilidad con todos los idiomas, incluidos aquellos con idiomas no latinos y aquellos que se leen de derecha a izquierda. Mientras que los sitios multilingües en Drupal 7 a menudo requerían una gran cantidad de módulos de internacionalización y traducción, combinados con algún código personalizado, Drupal 8 iba a resolver todos nuestros dolores de cabeza multilingües de una vez por todas. ¿Lo hizo?

Todo es (casi) perfecto.

Es cierto que Drupal 8 ha hecho que sea más fácil que nunca admitir varios idiomas. Su revisión arquitectónica simplificó la estructura, haciendo que la internacionalización del contenido sea mucho más lógica y eficiente. Se movió una gran cantidad de funcionalidades de internacionalización al núcleo para mejorar el mantenimiento y el soporte. Y, por supuesto, para permitir a los creadores de sitios de Drupal crear sitios multilingües listos para usar.

Por lo tanto, Drupal 8 resuelve todas las molestias que podría haber tenido con varios idiomas en un solo sitio perfectamente y para siempre. ¿Correcto? No exactamente.

Las cosas nunca son exactamente como nosotros (o nuestros clientes) las queremos y eso está bien. Por eso hay desarrolladores de Drupal.

Elegante y minimalista

Hablemos sobre el conmutador de idiomas en Drupal 8. Se puede habilitar, colocar como un bloque en la región de su elección y prácticamente funciona. Muestra todos los idiomas agregados escritos completamente, así:

• Inglés
• Catalán
• Español

Sin embargo, como nos gusta nuestro sitio elegante y minimalista y consideramos a nuestros visitantes conocedores de la tecnología, nos gustaría personalizar los enlaces y determinar exactamente dónde y cómo se representan los enlaces de cambio de idioma.

Personalizar el bloque de idioma

Para controlar la salida del bloque de cambio de idioma, queremos poder mostrar solo los enlaces necesarios. No necesitamos un título de bloque o ninguno de esos elementos molestos, solo queremos una lista HTML con enlaces, por ejemplo:

<ul class="language-switcher-language-url links">
  <li hreflang="en" class="en">
    <a href="/" class="language-link" hreflang="en">en</a>
  </li>
  <li hreflang="es" class="es is-active">
    <a href="/es" class="language-link is-active" hreflang="es">es</a>
  </li>
</ul>

Afortunadamente, el sistema de plantillas Twig de Drupal 8 hace que sea bastante fácil renderizar exactamente lo que queremos. Simplemente colóquelo en el page.html.twig de su tema personalizado donde desee sus enlaces de cambio de idioma:

{ # Language switcher # }
{{ drupal_block('language_block:language_interface', wrapper=false) }}

Cambiar las etiquetas del enlace

Aunque probablemente sea la mejor práctica escribir por completo los idiomas disponibles (inglés, español, francés, catalán), podríamos hacerlo con un minimalismo más elegante. Además, consideramos a nuestros visitantes como expertos en tecnología, por lo que probablemente podamos bastar con mostrar solo los códigos de idioma como nuestros enlaces: EN y ES.

Abordemos este con una función de preproceso. Simplemente pegue este código en su CUSTOMTHEMENAME.theme y los enlaces en su conmutador deberían transformarse mágicamente en códigos de idioma:

/**
 * Use language code for the language switcher
 */
function CUSTOMTHEMENAME_preprocess_links__language_block(&$variables) {
  foreach ($variables['links'] as $i => $link) {
    // @var \Drupal\language\Entity\ConfigurableLanguage $linkLanguage
    $linkLanguage = $link['link']['#options']['language'];
    $variables['links'][$i]['link']['#title'] = $linkLanguage->get('id');
  }
}

No olvide cambiar CUSTOMTHEMENAME al nombre de su tema personalizado.

Básicamente estamos sustituyendo el nombre del idioma por su "código de idioma".

Ocultar enlaces para contenido no traducido

Una vez que el conmutador de idiomas está habilitado y colocado, siempre está ahí. Incluso cuando no hay una versión traducida de la página que está viendo, hay un enlace a la traducción de esa página. Lo cual no existe y solo lo llevará de regreso al mismo nodo, posiblemente en una ruta sin alias. Eso es malo para el SEO y peor para la usabilidad.

Esto se puede arreglar de forma fácil y rápida usando el módulo "Language Switcher Extended" que permite especificar cómo se van a comportar los enlaces justamente en estos casos.

Otra forma de hacer lo mismo es programar un módulo custom (a medida) para el proyecto web en concreto. Pero en la mayoría de casos esto no hace falta, aunque da un mayor control y puede ser necesario en algunos casos especiales.

Ahora los enlaces no traducidos deberían desaparecer mágicamente hasta que publique una traducción de la página.

Se ha debatido si debería eliminar los enlaces a contenido no traducido como lo demostramos aquí o adoptar un enfoque menos radical y agregar clases css para mostrar enlaces atenuados o aplicar tachado. En mi experiencia lo mejor es no ocultar cosas con css si se puede hacer lo mismo en el backend. Por rendimiento, usabilidad, accesibilidad (lectores de pantalla) y no depender del theme visual si en un futuro se cambia.