Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Timeline Plugin

Table of Contents



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_timeline() and build_linkeddata() themselves, see timeline.html.twig#L27 and timeline.html.twig#L80
  • language-setting in plugin-configuration and FrontMatter is now locale
  • limit-setting in plugin-configuration and FrontMatter defaults to 8

Examples of use


Before configuring this plugin, you should copy the user/plugins/timeline/timeline.yaml to 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
  by: date
  dir: asc
cache: native
truncate: 100

Settings and Usage

Variable Default Options Note
enabled true true or false Enables or disables the plugin.
locale en string (2-3) Any two- or three-letter (ISO 639-2 or 639-3) language code.
by date date, title, or folder Orders Pages according to date, title, or folder-name.
dir asc asc or desc Order Pages ascending or descending.
cache native native, persist, transient, or disabled 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-template) and Events (, Timeline Event-template). Headers are used as separators and can order their descendant Events, as well as contain normal fields such as title, subtitle, and 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 type, place, locality, and 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.

Adding Timelines and Events

The plugin assumes some knowledge of basics with Grav, largely Pages and FrontMatter. Any Page that you create in Grav with the filename is a wrapper for the Timeline, and will take any Pages created with the filename as its Events.

Consider the Constantinian Dynasty, in this folder. The initial creates the Page at domain.tld/timeline/dominate, and all the Pages below it are Events - each with their own, like Julian at domain.tld/timeline/dominate/constantinian/julian.

Step by step

  1. Create a Page for your Timeline, for example a folder like /user/pages/mytimeline
  2. In this folder, create a file named
  3. 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
  4. For each Event in the Timeline, create a subfolder, like /user/pages/mytimeline/myevent
  5. In this folder, create a file named
  6. 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:

  1. Go to the Pages-administration:

Pages-list in Admin

Clicking the Add Page button yields:

Add Page Dialog

Editing a Timeline

Editing a Timeline

Editing an Event

Editing an Event

Event Options

Event Options

Adding a header or a footer, or customizing templates

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 partials/timeline_header.html.twig and partials/timeline_footer.html.twig templates.

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.

Strategies for large timelines

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:

  1. 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.
  2. 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.

Collapsing periods

Each subordinate Timeline has the classes .timeline-item.period, and each of its Events have the classes .timeline-item with .odd or .even. As such, if you are familiar with JavaScript, you could collapse the Timeline - at any level - and its Events by just traversing the DOM between each .period.


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.


This plugin will only work with Grav v1.6 or higher, as it requires PHP v7.1.3 or higher. Dropping this requirement would mean devolving features, which the developer is not inclined to do.

Grav Package Manager

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 /your/site/grav/user/plugins/timeline.


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

You should now have all the plugin files under


NOTE: This plugin is a modular component for Grav which requires Grav and the Error and Problems to operate.


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.

To print pure text, remove the print-class from <div class="print timeline-wrapper col-12 col-sm-10 col-sm-offset-1 col-md-8 offset-md-2"> in timeline.html.twig.


Use a SCSS-compiler, like LibSass, eg. node-sass and compile assets/timeline.scss to assets/timeline.css in the plugin-folder. For example: node-sass --watch --source-map true assets/timeline.scss assets/timeline.css.


This theme is free and open source software, distributed under the MIT License.

FOSSA Status


Create and manage timelines in an ordered, hierarchical manner.







No packages published