Selector de idioma desplegable
Proporciona un elemento select desplegable para cambiar de idioma en lugar de los hipervínculos predeterminados, con soporte para múltiples bibliotecas de widgets JavaScript y skins personalizables.
lang_dropdown
Install
composer require 'drupal/lang_dropdown:8.x-2.4'
composer require 'drupal/lang_dropdown:8.x-2.0'
Overview
Language Switcher Dropdown es un módulo que expone un nuevo bloque similar al bloque predeterminado de cambio de idioma proporcionado por el módulo Language del núcleo de Drupal. En lugar de usar hipervínculos, los visitantes del sitio pueden cambiar de idioma usando una lista de selección desplegable.
El módulo proporciona cuatro tipos diferentes de widgets de salida: Select HTML simple, Marghoob Suleman Dropdown (ms-Dropdown), Chosen y ddSlick. Cada tipo de widget viene con su propio conjunto de opciones de configuración, incluyendo varios skins prediseñados y soporte para skins personalizados.
El módulo se integra perfectamente con el módulo Language Icons para mostrar banderas de países junto a los nombres de los idiomas. Además, los administradores pueden configurar qué idiomas son visibles para roles de usuario específicos, proporcionando control granular sobre la experiencia de cambio de idioma.
Features
- Proporciona un bloque de cambio de idioma con select desplegable en lugar de hipervínculos para una mejor experiencia de usuario
- Cuatro tipos de widgets de salida: Select HTML simple, Marghoob Suleman Dropdown (ms-Dropdown), biblioteca Chosen y biblioteca ddSlick
- Múltiples skins prediseñados para widgets ms-Dropdown (Default, Dark, Blue) y ddSlick (Default, Dark, Blue) con variantes para posicionamiento de iconos
- Soporte para skins CSS personalizados para widgets ms-Dropdown y ddSlick
- Integración con el módulo Language Icons para mostrar banderas de países en el desplegable
- Cuatro opciones de formato de visualización: Traducido al idioma actual, Nombre nativo del idioma, Código de idioma, Traducido al idioma de destino
- Opción para mostrar todos los idiomas habilitados o solo idiomas con traducciones disponibles
- Opción para ocultar el selector cuando solo hay una traducción disponible
- Opción para redirigir a la página de inicio al cambiar de idioma
- Ancho del desplegable configurable en píxeles
- Ocultación de idiomas basada en roles: ocultar idiomas específicos para roles de usuario específicos
- Alternativa elegante de JavaScript con soporte noscript para envío de formularios
- Compatible con contextos de caché para un almacenamiento en caché adecuado con idioma, roles de usuario, ruta URL y argumentos de consulta
Use Cases
Selector de idioma básico para sitio multilingüe
Coloque el bloque Selector de idioma desplegable en la región del encabezado o barra lateral de su sitio. Configúrelo con el formato de visualización 'Nombre nativo del idioma' y el widget 'Select HTML simple' para un selector de idioma limpio y accesible que funciona sin bibliotecas JavaScript.
Selector de idioma visualmente mejorado con banderas
Instale el módulo Language Icons y la biblioteca MS Dropdown o ddSlick. Configure el bloque para usar uno de estos widgets para mostrar un desplegable atractivo con banderas de países junto a cada opción de idioma.
Ocultar idiomas para usuarios anónimos
Use la sección 'Configuración de ocultación de idiomas' en la configuración del bloque para ocultar ciertos idiomas (ej., traducciones en borrador) de usuarios anónimos mientras los mantiene visibles para usuarios autenticados o administradores.
Selector de idioma para traducción de contenido
Habilite la opción 'Ocultar si solo hay un idioma disponible' y deshabilite 'Mostrar todos los idiomas habilitados' para crear un selector de idioma que solo aparece cuando el contenido actual tiene múltiples traducciones, mostrando solo las traducciones disponibles.
Desplegable de idioma con marca personalizada
Cree un archivo CSS de skin personalizado siguiendo los archivos de ejemplo proporcionados (ldsCustom.css.sample o ddsCustom.css.sample), colóquelo en la carpeta de biblioteca apropiada y seleccione 'Skin personalizado' en la configuración del bloque para que coincida con el diseño de su sitio.
Tips
- Descargue las bibliotecas externas (ms-Dropdown, Chosen, ddSlick) a la carpeta libraries en la raíz de Drupal para widgets de desplegable mejorados
- Use el módulo Language Icons para mostrar banderas de países en su desplegable de idiomas
- La opción de visualización 'Traducido al idioma de destino' muestra cada nombre de idioma en ese idioma mismo (ej., Français para francés)
- Cree skins personalizados copiando los archivos CSS de ejemplo y modificándolos para que coincidan con su tema
- Habilite 'Ocultar si solo hay un idioma disponible' para evitar mostrar un desplegable inútil de una sola opción en contenido no traducido
- El módulo proporciona diferentes bloques para diferentes tipos de idioma (Interfaz, Contenido) cuando se configuran múltiples tipos de idioma
- Para sitios que usan negociación de idioma basada en sesión, el desplegable refleja correctamente el idioma seleccionado en la sesión
Technical Details
Admin Pages 1
/admin/structure/block
Colocar y configurar el bloque Selector de idioma desplegable. El formulario de configuración del bloque proporciona todas las opciones para personalizar el comportamiento y apariencia del desplegable de idiomas.
Hooks 1
hook_help
Proporciona texto de ayuda para el módulo en la página de ayuda, incluyendo instrucciones para crear skins personalizados tanto para widgets MS Dropdown como ddSlick.
Troubleshooting 4
Esto fue abordado en una actualización reciente (Issue #3524882). Asegúrese de estar usando la última versión del módulo. La corrección mejoró el manejo del contexto de caché para un almacenamiento en caché adecuado con idioma, roles de usuario, ruta URL y argumentos de consulta.
Estos tipos de widget requieren que sus respectivas bibliotecas JavaScript estén instaladas. Descargue las bibliotecas y extráigalas a la carpeta libraries: libraries/ms-dropdown, libraries/chosen o libraries/ddslick.
Instale y habilite el módulo Language Icons. Para los widgets MS Dropdown y ddSlick, las banderas aparecerán en cada opción. Para Select HTML simple, configure la posición de la bandera en los ajustes del bloque.
Asegúrese de que su archivo CSS personalizado esté colocado en la carpeta de biblioteca correcta y nombrado correctamente. El nombre de la clase CSS en su archivo debe coincidir con el nombre del skin personalizado ingresado en la configuración del bloque.