Table of Contents
- Examples of use
- Adding Timelines and Events
The Timeline-plugin is for Grav CMS, and lets you create and manage timelines in an ordered, hierarchical manner. Timelines can be nested within each other, minutely customized on a Page-level, and further customized with your own templates and styles. A demo is available, and demo content can be found in /pages.
Changes in version 2
Note: Version 2.0.0 contains API-changes, and so your plugin-configuration and files will need to be updated. Please see the CHANGELOG. Most notably:
- Templates must call
build_linkeddata()themselves, see timeline.html.twig#L27 and timeline.html.twig#L80
language-setting in plugin-configuration and FrontMatter is now
limit-setting in plugin-configuration and FrontMatter defaults to
Before configuring this plugin, you should copy the
user/config/plugins/timeline.yaml and only edit that copy.
Here is the default configuration and an explanation of available options:
enabled: true language: en order: by: date dir: asc cache: native truncate: 100
||Enables or disables the plugin.|
|locale||en||string (2-3)||Any two- or three-letter (ISO 639-2 or 639-3) language code.|
||Orders Pages according to date, title, or folder-name.|
||Order Pages ascending or descending.|
||Where to store plugin's internal data.|
|truncate||100||int or boolean||Limits the amount of words in each note, to an integer or boolean state for default (100).|
|truncate_image||false||boolean||Prevent images from Events rendering in Timeline.|
|linked_data||true||boolean||Generate Linked Data from Timelines and Events.|
|limit||16||int||Limit how deep to render a nested Timeline.|
Each timeline is structured with a Header (
timeline.md, Timeline-template) and Events (
timeline_event.md, Timeline Event-template). Headers are used as separators and can order their descendant Events, as well as contain normal fields such as
date. Dates should be as exhaustive as possible, and are best expressed in the ISO 8601-format:
2020-12-29 for a date or
2020-12-29T16:36:49+00:00 for date and time.
Events render a formatted, localized
date using the
locale-setting, as well as an
image. In addition, Events are cast as Linked Data with JSON-LD, wherein
region are used.
Note: Events' dates are used for sorting and structuring the Timeline, so it's important that this information can be correctly parsed by the plugin.
Sound confusing? It's much easier to do all this from the Admin-plugin.
The plugin assumes some knowledge of basics with Grav, largely Pages and FrontMatter. Any Page that you create in Grav with the filename
timeline.md is a wrapper for the Timeline, and will take any Pages created with the filename
timeline_event.md as its Events.
Consider the Constantinian Dynasty, in this folder. The initial timeline.md creates the Page at domain.tld/timeline/dominate, and all the Pages below it are Events - each with their own timeline_event.md, like Julian at domain.tld/timeline/dominate/constantinian/julian.
- Create a Page for your Timeline, for example a folder like /user/pages/mytimeline
- In this folder, create a file named
- Edit this file like any normal Page in Grav: Add some FrontMatter and Content (example)
- This is your actual Timeline, but not the Events within it
- For each Event in the Timeline, create a subfolder, like /user/pages/mytimeline/myevent
- In this folder, create a file named
- Edit this file like any normal Page in Grav too: Add FrontMatter and Content (example)
In the Admin-panel
If you are using the Admin-plugin, you will need to create a Page using the Timeline or Timeline Event template:
- Go to the Pages-administration:
Clicking the Add Page button yields:
Editing a Timeline
Editing an Event
Your theme can override, extend or otherwise customize the
timeline.html.twig-template just by creating a local copy in
/user/themes/mytheme/templates/timeline.html.twig. If you just want to add a header or footer, for a menu or copyright notice for example, you can use the
These are empty in the plugin's directory, but anything inside them will be included by the plugin's main template. Just place them in
/user/themes/mytheme/templates/partials. You could also call the
timeline-block from the main template using the block-function.
The following tips are not implemented in the plugin by default, because they encompass advanced usage which should extend the plugin, rather than be included by default.
Large, nested Timelines
The structure of a Timeline's data is hierarchical, not flat, and as such pagination can not effectively be implemented. However, you most likely do not want pagination, but rather to distinguish the periods of the Timeline. There are two ways to reduce the load from a large Timeline:
- Construct the Timeline into smaller series, nesting it further, so that less Events are loaded at once. You'll also need to set the
limit-setting to the maximum depth to render. Note that this is applied to each Timeline-constructed, so you can have a low limit set, which won't prevent rendering larger structures further down.
- Alternatively, destructure the Timeline into smaller series, but make them distinct Pages, thereby reducing nesting. This would entail lifting your nested Timelines up one or more levels in the Pages-hierarchy.
Many assets load at once from Events
If many images, videos or other media are loaded in Events, they'll all load at once when the Timeline renders, causing a large increase in the Page's weight. To avoid loading them all at once, implement lazy-loading. There are many solutions for this available, and Google has a substantial guide.
Each subordinate Timeline has the classes
.timeline-item.period, and each of its Events have the classes
Installing the Timeline-plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.
The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's terminal (also called the command line). From the root of your Grav install type:
bin/gpm install timeline
This will install the Timeline-plugin into your
/user/plugins directory within Grav. Its files can be found under
To install this plugin, just download the zip version of this repository and unzip it under
/your/site/grav/user/plugins. Then, rename the folder to
timeline. You can find these files on GitHub or via GetGrav.org.
You should now have all the plugin files under
Two modes of printing are supported: Pure TexT or Graphics.
By default, graphics are included, and the layout will typically emulate mobile-view. Events will not alternate between odd and even.
Use a SCSS-compiler, like LibSass, eg. node-sass and compile
assets/timeline.css in the plugin-folder. For example:
node-sass --watch --source-map true assets/timeline.scss assets/timeline.css.