Timelines in articles

Do you ever wish you could have a timeline inside another entry to convey a sequence of events visually? Now you can! By creating an article set to show the entry’s properties, you can display a custom timeline in the Overview page. From there, the template can even move the timeline to another specified part of your entry’s description or articles! You can also set a dashboard entry preview widget to show properties in order to add one or more timelines to your home page.

• Note: You can only have one timeline per entry, for the time being. I might attempt to allow more if there is demand.
  
• Important: This is a beta release. There will definitely be bugs for various use cases, and additional features are likely to be added based on your feedback. Settings and formatting are still likely to change at this stage. Thank you for your patience!
  

Step 1: Set up properties

This plugin references two types of properties: one for the timeline’s overall settings, and any number of properties defining each event. Applying the property kit to an entry will create one of each type with sample values to guide you. Both of them contain a series of parameter and values separated like so: parameter1=value|parameter2=value. Please do not add spaces or change the capitalization of these settings.

Timeline Settings

start=0|end=200|dividers=10|title=Sample Timeline

This property must not be renamed. It accepts the following parameters:

• start: The start year for your timeline.
• end: The end year for your timeline.
• dividers: The top of the timeline has a row of year indicators to help situate events. This parameter determines how many sections this ruler has. For example, a value of 10 on a timeline that spans 200 years will have 10 markers at 20-year intervals (plus year 0).
  
• name: An optional name for your timeline, displayed prominently above it. If you don’t want a title, leave the "|title=" part in place without a value after the equal sign.
  

Timeline Entry (...)

row=1|start=3|end=20|color=royalblue|name=Entry 1
A description is optional.

Skip two lines to create paragraphs.

This property defines a single event on the timeline, and you can create as many as you need. Its name must start with "Timeline Entry", but you can add more words or numbers to keep track of them more easily. It accepts the following parameters:

• row: Multiple events can share the same row if their periods don’t overlap. This parameter allows you to set each event’s row with a number ranging from 1 to infinity. Therefore, the order of your properties in the form does not matter and you can organize them any way you see fit.
  
• start: The start year for this event. Years earlier than the timeline’s start are allowed but will not be shown – so you can show only the relevant part of a long period while still having an accurate start date on it.
  
• end: The end year for this event. Years later than the timeline’s end are allowed but will not be shown, except for a small section past the last date indicator – so you can show only the relevant part of a long period while still having an accurate end date on it.
• color: The background color for the event’s bar on the timeline. You can use any common color format such as hexadecimal, RGB, HSL, etc. Defaults to Kanka’s standard purple.
  
• name: The event’s title, ideally short and descriptive. When an event’s bar is hovered or tapped, this will be shown under the timeline along with the start and end dates.
• (description): A description of the event can be provided for display under the title when hovered or tapped. Simply enter a line break after the other settings and any text (including HTML) on lines 2+ will be used for the description. This requires the property to have the Paragraph type.
  

Step 2: Create an article

Next, create a new article on the entry, and in the Article layout dropdown, select Properties. The article will display this sheet instead of a block of text. Give your article a title, check that all settings are as desired, and save. If you’re happy with the timeline occupying its own article, you’re all set!

Step 3: Move the timeline to another article or the description (optional)

If you prefer, you can easily move the timeline to any other article, or to the main description. Simply edit the description or article where you want it to appear, switch to Code View in the editor’s toolbar, and insert the code below wherever you want the timeline to reside among the rest of your content:

<div id="timeline-in-post-target"></div>

When the template finds this code on the page, it moves the timeline to it and hides the original article from the page to keep it clean. When the page is viewed by a campaign admin, they will see a small edit link below the timeline to edit the article, should they need to change its permissions or other settings or delete it altogether.

Styling

The out-of-the-box appearance of the timeline is kept deliberately simple to integrate easily with all official themes. Each element has a specific class you can easily target with campaign CSS:

• .timeline-in-post-title: Title above the timeline
  
• .timeline-in-post: Main timeline
• .timeline-in-post-reference: Ruler at the top of the timeline with year indicators
  
• .timeline-in-post-reference > a::before: Actual numbers for year indicators
• .timeline-in-post-entry: Each event’s bar
  
• .timeline-in-post-details: Title (h5) and description (p) of hovered event

Example: Using it as a bar graph to track progress

You can easily turn the timeline into a percentage-base progress tracker by setting the timeline to a length of 100 and adding the following to your campaign CSS to show the years in the ruler as percentages:

.timeline-in-post-reference a::before,
.timeline-in-post-reference a:last-child::after{
    content: counter(years)"%";
}

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):