View Modes Inventory - Listo para Bootstrap
Proporciona un conjunto completo de view modes preconfigurados y listos para Bootstrap para tipos de contenido, con mapeo automático de diseño usando Display Suite y UI Patterns.
vmi
Install
composer require 'drupal/vmi:^3.0'
Overview
View Modes Inventory (VMI) es un módulo de Drupal que proporciona una colección estandarizada de 17 view modes listos para Bootstrap diseñados para mostrar contenido como tarjetas. El módulo instala automáticamente estos view modes para entidades node y proporciona plantillas de configuración que pueden aplicarse a cualquier tipo de contenido.
Cuando un administrador del sitio habilita uno de los view modes de VMI para un tipo de contenido a través de la configuración de visualización de entidades, el módulo aplica automáticamente un layout preconfigurado de Display Suite usando UI Patterns de la biblioteca Varbase Components. Esta automatización reduce significativamente el tiempo necesario para configurar visualizaciones de contenido consistentes basadas en tarjetas en todo un sitio web.
El módulo soporta cuatro estilos distintos de layout de tarjetas: tarjetas Impressed (multimedia arriba del contenido), tarjetas Featured (multimedia y contenido lado a lado con layouts de columnas responsivos), tarjetas Overlay (texto superpuesto sobre multimedia), tarjetas Text (solo contenido sin multimedia), y tarjetas Hero (estilo de superposición de ancho completo). Cada estilo está disponible en múltiples tamaños (xsmall, small, medium, large, xlarge) para adaptarse a diversos requisitos de diseño.
Features
- Proporciona 17 view modes de entidad preconfigurados para contenido node organizados en 5 estilos de tarjetas: Impressed (5 tamaños), Featured (5 tamaños), Text (3 tamaños), Overlay (3 tamaños), y Hero (1 tamaño)
- Mapeo automático de layout cuando se habilitan los view modes - no se requiere configuración manual de Display Suite
- Usa UI Patterns de Varbase Components para layouts de tarjetas compatibles con Bootstrap 5 (card_impressed, card_featured, card_text, card_overlay, card_hero)
- Detección inteligente de campos que filtra automáticamente la configuración basándose en campos existentes (field_image, field_video, field_media, body)
- Plantillas de configuración incluidas para personalizar y extender a nuevos tipos de contenido
- Integración con el módulo Smart Trim para truncamiento automático de texto en los cuerpos de las tarjetas
- Plantillas de campo de Display Suite para renderizado adecuado del título del node con enlaces
- Configuraciones de columnas responsivas para tarjetas Featured que soportan el sistema de rejilla de Bootstrap
Use Cases
Crear un listado de blog con teasers basados en tarjetas
Al construir una sección de blog, habilita el view mode 'Impressed card - medium' para tu tipo de contenido Article. Esto configura automáticamente un layout de tarjeta con la imagen destacada en la parte superior, seguida del título y un extracto del body truncado. Usa este view mode en un listado de Views para crear una rejilla consistente de tarjetas de artículos.
Construir una sección hero para contenido destacado
Para una sección hero en la página principal con contenido prominente, habilita el view mode 'Hero card'. Esto crea una tarjeta de ancho completo con la multimedia como fondo y el contenido superpuesto. La configuración incluye proporciones de aspecto adecuadas (21:9) y posicionamiento para visualizaciones hero impactantes.
Crear teasers de contenido para la barra lateral
Para widgets de barra lateral mostrando contenido relacionado, usa los view modes 'Text card - small' o 'Featured card - xsmall'. Estos formatos compactos muestran información mínima (título y extracto corto) adecuados para layouts de columnas estrechas sin multimedia.
Implementar un layout estilo revista
Combina múltiples view modes de VMI en un solo layout de página: usa 'Hero card' para la historia principal, 'Featured card - large' para elementos destacados secundarios con multimedia lado a lado, 'Impressed card - medium' para una rejilla de artículos estándar, y 'Overlay card - medium' para características de categoría visualmente prominentes.
Extender VMI a tipos de contenido personalizados
Para aplicar configuraciones de VMI a un nuevo tipo de contenido personalizado, copia las plantillas de configuración desde src/assets/config_templates/CONTENT_TYPE_NAME/ al directorio config/install/ de tu módulo personalizado, luego reemplaza todas las instancias de 'CONTENT_TYPE_NAME' con el nombre de máquina de tu tipo de contenido real tanto en los nombres de archivo como en el contenido de los archivos.
Tips
- Usa los view modes Featured card cuando necesites layouts de multimedia y contenido lado a lado con puntos de quiebre de columnas responsivos
- Las tarjetas Overlay funcionan mejor con imágenes que tienen suficiente contraste para la legibilidad del texto superpuesto
- Las tarjetas Text son ideales para listados donde la multimedia no está disponible o no es necesaria, como resultados de búsqueda o listas de contenido simples
- El módulo filtra automáticamente las configuraciones de campos que no existen en tu tipo de contenido, así que no necesitas preocuparte por eliminar referencias a campos no usados
- Al personalizar configuraciones, copia las plantillas a tu propio módulo en lugar de modificar los archivos fuente de VMI para preservar la capacidad de actualización
- Considera la jerarquía del contenido al elegir tamaños de tarjetas - usa tarjetas más grandes (xlarge, large) para contenido destacado y tamaños más pequeños para contenido de apoyo
Technical Details
Hooks 2
hook_help
Proporciona texto de ayuda para la página de ayuda del módulo describiendo la funcionalidad de View Modes Inventory.
hook_form_entity_view_display_edit_form_alter
Altera el formulario de edición de visualización de entidades para agregar un manejador de envío que aplica automáticamente las configuraciones de layout de VMI cuando se habilitan los view modes.
Troubleshooting 4
Asegúrate de que tu tipo de contenido tenga los campos requeridos (title, y opcionalmente body, field_image, field_video, o field_media). Limpia la caché de Drupal después de habilitar los view modes. Verifica que el theme por defecto soporte los UI Patterns de Varbase Components.
Verifica que tu theme esté basado en Bootstrap e incluya el CSS necesario para los patterns de tarjetas de Varbase Components. Comprueba que el nombre del theme coincida con lo esperado en la configuración del layout (el placeholder DEFAULT_ACTIVE_THEME debería resolverse a tu theme activo).
Asegúrate de que tu tipo de contenido tenga un campo de referencia de multimedia llamado exactamente 'field_image', 'field_video', o 'field_media'. Estos son los únicos nombres de campo que el módulo soporta automáticamente. También verifica que los view modes de multimedia apropiados (media_16_09, media_21_09, media_video_16_09, media_video_21_09) estén configurados en tus tipos de multimedia.
El módulo Smart Trim maneja el truncamiento de texto. Comprueba que Smart Trim esté correctamente instalado y configurado. La longitud de truncamiento por defecto varía según el tamaño de la tarjeta (típicamente 30-300 palabras dependiendo del view mode).