A Simple Timeline
simple_timeline
A Views style plugin that renders entities on a simple vertical timeline with customizable positioning and markers.
Overview
The Simple Timeline module provides a Views style plugin that allows rendering of any entities selected by a View in a visually appealing vertical timeline format. The module is lightweight, requiring only the core Views module, and offers flexible configuration options for timeline appearance.
The timeline displays content items with circular markers connected by a vertical line. Items can be positioned alternately (left-right-left), all on the left side, or all on the right side of the timeline. The marker position can be adjusted to align with the top, center, or bottom of each content item.
The module is highly themeable through CSS overrides, allowing site builders to customize the timeline line color, marker appearance (color, border, shape), and overall styling to match their site's design.
Install
composer require 'drupal/simple_timeline:^3.0'
composer require 'drupal/simple_timeline:8.x-2.0'
Features
- Views style plugin for vertical timeline display
- Three item positioning modes: alternate (zigzag layout), left-only, or right-only
- Three marker position options: top, center, or bottom of each row
- Custom CSS class support for both wrapper and list elements
- Theme suggestions for view-specific template overrides
- Fully customizable appearance through CSS overrides
- Odd/even row classes for additional styling flexibility
- Support for Views row plugins and custom row classes
Use Cases
Company History Timeline
Create a content type for historical events with a date field and description. Build a View that sorts events by date and use the Simple Timeline style to display the company's history in chronological order with alternating layout.
Project Milestones
Display project milestones or release notes in a timeline format. Use left-positioned items for a clean, linear progression view. Each milestone can link to detailed release notes.
Blog Post Archive
Present blog posts in a timeline format showing publication dates. Use the alternate positioning to create visual interest while browsing through post history.
Event Schedule
Display upcoming or past events in a timeline. Configure marker position to 'top' to align markers with event titles for a clean look.
Biography or CV
Create a personal or professional timeline showing career progression, education history, or life events in chronological order.
Tips
- Use the Wrapper class option to add container styling without modifying templates
- Override timeline colors by targeting ul.timeline-list::after for the line and span.timeline-marker for markers
- Create view-specific templates using the naming pattern views-view-simple-timeline--[view-id]--[display].html.twig
- The alternate layout works best with similar-height content items for visual balance
- For mobile responsiveness, consider adding CSS media queries to switch from alternate to left/right positioning on smaller screens
- Combine with Views row styles like 'Content' or 'Fields' to control what appears in each timeline item
Dependencies
Related Projects
Provides a style plugin that integrates with Drupal Views, allowing any View to be displayed as a timeline
Hooks
| Hook | Description |
|---|---|
hook_help |
Provides help text for the module on the help page |
simple_timeline_theme_suggestions_views_view_simple_timeline_alter |
Adds theme suggestions for the Simple Timeline template based on the view ID and display |
template_preprocess_views_view_simple_timeline |
Prepares variables for the Simple Timeline template including position classes, row classes, and odd/even designations |
Troubleshooting
Ensure you have selected 'Alternate position' in the style settings. The module uses odd/even classes to position items, so CSS must be loading correctly.
Check that the simple_timeline/timeline library is being attached. Inspect the page to verify css/timeline.css is loaded. The timeline line is created using CSS ::after pseudo-element.
Verify the marker position setting matches your design needs. For custom row heights, you may need to override the marker positioning CSS.
Ensure class names contain only valid CSS characters (letters, numbers, hyphens, underscores). The schema validates class names against the pattern /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/