Dynamic Layouts
Un módulo de construcción visual de layouts que permite crear y gestionar layouts reutilizables para usar con Display Suite, Panels y Layout Builder del núcleo de Drupal.
dynamic_layouts
Install
composer require 'drupal/dynamic_layouts:^2.1'
composer require 'drupal/dynamic_layouts:^2.0'
Overview
Dynamic Layouts proporciona una interfaz amigable para crear layouts personalizados sin escribir código. Los constructores de sitios pueden diseñar layouts visualmente añadiendo filas y columnas, personalizando clases CSS y configurando anchos de columna a través de una interfaz de administración intuitiva con AJAX.
El módulo soporta tanto el sistema de rejilla de Bootstrap v4 como configuraciones de rejilla personalizadas (6, 8 o 12 columnas). Cada layout creado automáticamente se convierte en un Layout Plugin que puede usarse con Layout Builder del núcleo de Drupal, Display Suite, Panels o cualquier otro módulo que consuma plugins de layout.
Las capacidades principales incluyen cálculo automático del ancho de columna al añadir/eliminar columnas, clases CSS personalizadas para filas y columnas, nombres de región configurables e iconos visuales para la previsualización del layout en la interfaz de Layout Builder.
Features
- Constructor visual de layouts con gestión de filas y columnas mediante AJAX para crear layouts reutilizables sin programación
- Soporte para el sistema de rejilla de Bootstrap v4 (12 columnas) y sistemas de rejilla personalizados (6, 8 o 12 columnas) con prefijos de clase CSS configurables
- Cálculo automático del ancho de columna al añadir o eliminar columnas, distribuyendo el espacio equitativamente entre las columnas no personalizadas
- Clases CSS personalizadas tanto para filas como para columnas, permitiendo un control de estilo detallado por elemento del layout
- Nombres de región/columna personalizables que se convierten en las etiquetas de región en Layout Builder
- Clases predeterminadas de fila y columna que se aplican a todos los elementos de un layout para un estilo consistente
- Integración como proveedor de Layout Plugin: cada layout está automáticamente disponible en Layout Builder, Display Suite y Panels
- Generación de iconos visuales para la previsualización del layout en la interfaz de selección de Layout Builder
- Soporte de exportación/importación a través del sistema de gestión de configuración de Drupal como entidades de configuración
Use Cases
Crear un layout de dos columnas responsive para páginas de contenido
Navegar a Estructura > Dynamic Layouts > Añadir nuevo layout. Introducir 'Contenido Dos Columnas' como nombre, 'Layouts de Contenido' como categoría, 'row' como clase de fila predeterminada. Guardar y añadir una columna a la fila existente. Editar cada columna para establecer anchos (ej. col-8 para contenido principal, col-4 para barra lateral). El layout aparece automáticamente en Layout Builder donde puedes aplicarlo a tipos de contenido y colocar bloques en cada región.
Construir un layout de pie de página de tres columnas
Crear un nuevo layout con una fila. Añadir dos columnas más para obtener tres columnas en total. El módulo calcula automáticamente los anchos (col-4 cada una para rejilla de 12 columnas). Editar cada columna para dar nombres significativos como 'Pie Izquierdo', 'Pie Centro', 'Pie Derecho'. Estos nombres se convierten en las etiquetas de región. Aplicar clases personalizadas a la fila para estilo específico del pie de página.
Crear un layout complejo de página de aterrizaje
Crear un layout comenzando con 4 filas. Configurar cada fila de manera diferente: hero de ancho completo (1 columna en col-12), sección de características de tres columnas, área de contenido de dos columnas y pie de página de cuatro columnas. Usar clases de fila personalizadas para añadir espaciado entre secciones. Cada columna puede tener clases personalizadas para animaciones o colores de fondo.
Usar rejilla personalizada de 8 columnas para diseño único
En Configuración, seleccionar biblioteca frontend Personalizada, introducir tu prefijo de columna (ej. 'span'), y elegir rejilla de 8 columnas. El módulo genera un sistema de rejilla CSS con tu prefijo. Crear layouts usando clases span-1 hasta span-8. La biblioteca CSS del frontend proporciona reglas de flexbox responsive para tu rejilla personalizada.
Exportar layouts para despliegue
Después de crear layouts en desarrollo, exportar configuración usando la Gestión de Configuración de Drupal (drush cex). Las entidades de configuración de layout se exportan como archivos YAML. Importar en producción con drush cim. Todos los layouts quedan disponibles inmediatamente después de limpiar caché.
Tips
- Configurar siempre los ajustes antes de crear layouts - seleccionar Bootstrap v4 si tu tema usa Bootstrap, o usar Personalizado para otros frameworks CSS
- Usar nombres de columna significativos ya que se convierten en las etiquetas de región mostradas en Layout Builder
- La clase de fila predeterminada 'row' funciona bien con Bootstrap; para rejillas personalizadas, usar la clase de fila de tu framework
- Al añadir columnas, el módulo divide automáticamente el espacio disponible entre las columnas no personalizadas
- Las personalizaciones de ancho de columna se preservan cuando se añaden/eliminan otras columnas - útil para barras laterales de ancho fijo
- Las categorías ayudan a organizar layouts - usar nombres consistentes como 'Páginas de Contenido', 'Páginas de Aterrizaje', 'Componentes'
- Los layouts son entidades de configuración - usar exportación/importación de configuración de Drupal para control de versiones y despliegue
- El icono visual en Layout Builder se genera automáticamente desde tu estructura de filas/columnas
- Añadir clases personalizadas a columnas para estilos específicos de componente sin afectar otros layouts
- Cuando se usa Bootstrap, el módulo genera clases col-1 hasta col-12 coincidiendo con el sistema de rejilla de Bootstrap
Technical Details
Admin Pages 4
/admin/config/dynamic-layouts
Lista todos los layouts dinámicos creados con sus nombres y categorías. Proporciona operaciones para editar o eliminar layouts existentes. Muestra un mensaje de advertencia si la configuración no ha sido establecida, solicitando a los usuarios configurar la biblioteca frontend antes de crear layouts.
/admin/config/dynamic-layouts/settings
Configura los ajustes globales de Dynamic Layouts incluyendo el framework CSS frontend y la configuración de rejilla. Los cambios en la configuración eliminarán todas las configuraciones de ancho de columna existentes en todos los layouts.
/admin/config/dynamic-layouts/add
Crear un nuevo layout dinámico definiendo su nombre, categoría, clases CSS predeterminadas y número inicial de filas. Después de guardar, puedes configurar visualmente filas y columnas.
/admin/config/dynamic-layouts/manage/{dynamic_layout}
Editar un layout dinámico existente. Proporciona gestión visual de filas y columnas con operaciones AJAX para añadir, editar y eliminar filas y columnas sin recargar la página.
Permissions 1
Hooks 4
hook_theme
Registra el hook de tema 'dynamic_layouts_backend' para renderizar el editor de layouts en la interfaz de administración.
hook_help
Proporciona texto de ayuda para la página de ayuda del módulo mostrando el contenido del README.
hook_install
Muestra un mensaje de bienvenida con un enlace a la página de configuración después de la instalación del módulo.
hook_requirements
Verifica los requisitos de tiempo de ejecución. Muestra una advertencia si se selecciona la biblioteca frontend Bootstrap pero el módulo bootstrap_library no está instalado.
Troubleshooting 6
Debes configurar los ajustes del módulo primero. Navegar a Estructura > Dynamic Layouts > Configuración y seleccionar una biblioteca frontend (Bootstrap o Personalizada). La funcionalidad de añadir layout está deshabilitada hasta que se configure.
Instalar el módulo bootstrap_library y seleccionar Bootstrap v4, o asegurarse de que tu tema incluye CSS de Bootstrap v4. El módulo solo proporciona la estructura de clases de Bootstrap, no el CSS de Bootstrap en sí.
Cuando personalizas el ancho de una columna, se 'bloquea' y no se ajustará automáticamente al añadir/eliminar otras columnas. Solo las columnas sin anchos personalizados participan en el cálculo automático de ancho. Verificar qué columnas tienen anchos personalizados establecidos.
Este es el comportamiento esperado. Cambiar la biblioteca frontend o el número de columnas de rejilla elimina todas las configuraciones de ancho de columna existentes porque las clases de ancho disponibles cambian. Necesitas reconfigurar los anchos de columna en todos los layouts existentes.
Limpiar todas las cachés (drush cr o Administración > Configuración > Rendimiento > Limpiar todas las cachés). El módulo limpia la caché de plugins al guardar, pero a veces se necesita una limpieza completa de caché.
Asegurarse de haber configurado tanto el prefijo de columna como el número de columnas de rejilla en la configuración. La biblioteca CSS del frontend solo se adjunta cuando se selecciona 'Personalizado'. Verificar que tu tema no está sobrescribiendo el CSS de dynamic-layouts-frontend.
Security Notes 3
- El permiso 'Administrar Dynamic Layouts' solo debe otorgarse a administradores de confianza ya que los layouts pueden incluir clases CSS personalizadas
- Las clases CSS personalizadas introducidas en las configuraciones de fila/columna se escapan al renderizar pero podrían potencialmente entrar en conflicto con estilos existentes
- Las configuraciones de layout se almacenan como entidades de configuración y siguen el modelo de seguridad de configuración estándar de Drupal