A Simple Timeline
Un plugin de estilo para Views que renderiza entidades en una línea de tiempo vertical simple con posicionamiento y marcadores personalizables.
simple_timeline
Instalar
composer require 'drupal/simple_timeline:^3.0'
composer require 'drupal/simple_timeline:8.x-2.0'
Overview
El módulo Simple Timeline proporciona un plugin de estilo para Views que permite renderizar cualquier entidad seleccionada por una View en un formato de línea de tiempo vertical visualmente atractivo. El módulo es ligero, requiriendo solo el módulo Views del core, y ofrece opciones de configuración flexibles para la apariencia de la línea de tiempo.
La línea de tiempo muestra elementos de contenido con marcadores circulares conectados por una línea vertical. Los elementos pueden posicionarse alternadamente (izquierda-derecha-izquierda), todos en el lado izquierdo o todos en el lado derecho de la línea de tiempo. La posición del marcador puede ajustarse para alinearse con la parte superior, central o inferior de cada elemento de contenido.
El módulo es altamente personalizable a través de Theme mediante sobrescrituras de CSS, permitiendo a los constructores de sitios personalizar el color de la línea de tiempo, la apariencia del marcador (color, borde, forma) y el estilo general para que coincida con el diseño de su sitio.
Features
- Plugin de estilo para Views para visualización de línea de tiempo vertical
- Tres modos de posicionamiento de elementos: alternado (diseño en zigzag), solo izquierda o solo derecha
- Tres opciones de posición del marcador: superior, central o inferior de cada fila
- Soporte de clases CSS personalizadas tanto para elementos contenedores como para listas
- Sugerencias de Theme para sobrescrituras de plantillas específicas de vistas
- Apariencia totalmente personalizable mediante sobrescrituras de CSS
- Clases de fila par/impar para flexibilidad adicional de estilos
- Soporte para plugins de fila de Views y clases de fila personalizadas
Use Cases
Línea de tiempo de historia de la empresa
Crear un tipo de contenido para eventos históricos con un campo de fecha y descripción. Construir una View que ordene los eventos por fecha y usar el estilo Simple Timeline para mostrar la historia de la empresa en orden cronológico con diseño alternado.
Hitos del proyecto
Mostrar hitos del proyecto o notas de versión en formato de línea de tiempo. Usar elementos posicionados a la izquierda para una vista de progresión lineal limpia. Cada hito puede enlazar a notas de versión detalladas.
Archivo de publicaciones del blog
Presentar publicaciones del blog en formato de línea de tiempo mostrando fechas de publicación. Usar el posicionamiento alternado para crear interés visual mientras se navega por el historial de publicaciones.
Programa de eventos
Mostrar eventos próximos o pasados en una línea de tiempo. Configurar la posición del marcador en 'superior' para alinear los marcadores con los títulos de los eventos para una apariencia limpia.
Biografía o CV
Crear una línea de tiempo personal o profesional mostrando progresión de carrera, historial educativo o eventos de vida en orden cronológico.
Tips
- Use la opción de clase Wrapper para añadir estilos al contenedor sin modificar las plantillas
- Sobrescriba los colores de la línea de tiempo apuntando a ul.timeline-list::after para la línea y span.timeline-marker para los marcadores
- Cree plantillas específicas de View usando el patrón de nombres views-view-simple-timeline--[view-id]--[display].html.twig
- El diseño alternado funciona mejor con elementos de contenido de altura similar para equilibrio visual
- Para responsividad móvil, considere añadir media queries CSS para cambiar de posicionamiento alternado a izquierda/derecha en pantallas más pequeñas
- Combine con estilos de fila de Views como 'Content' o 'Fields' para controlar qué aparece en cada elemento de la línea de tiempo
Technical Details
Hooks 3
hook_help
Proporciona texto de ayuda para el módulo en la página de ayuda
simple_timeline_theme_suggestions_views_view_simple_timeline_alter
Añade sugerencias de Theme para la plantilla de Simple Timeline basándose en el ID de la View y el display
template_preprocess_views_view_simple_timeline
Prepara variables para la plantilla de Simple Timeline incluyendo clases de posición, clases de fila y designaciones par/impar
Troubleshooting 4
Asegúrese de haber seleccionado 'Posición alternada' en los ajustes de estilo. El módulo usa clases par/impar para posicionar elementos, por lo que el CSS debe estar cargándose correctamente.
Verifique que la biblioteca simple_timeline/timeline esté siendo adjuntada. Inspeccione la página para verificar que css/timeline.css está cargado. La línea de la línea de tiempo se crea usando el pseudo-elemento CSS ::after.
Verifique que el ajuste de posición del marcador coincida con sus necesidades de diseño. Para alturas de fila personalizadas, puede necesitar sobrescribir el CSS de posicionamiento del marcador.
Asegúrese de que los nombres de clase contengan solo caracteres CSS válidos (letras, números, guiones, guiones bajos). El schema valida los nombres de clase contra el patrón /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/