Timelines in posts en

Do you ever wish you could have a timeline inside another entity to convey a sequence of events visually? Now you can! By creating a post set to show the entity’s attributes, 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 entity’s entry or posts! You can also set a dashboard entity preview widget to show attributes in order to add one or more timelines to your home page.

• Note: You can only have one timeline per entity, 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 attributes

This plugin references two types of attributes: one for the timeline’s overall settings, and any number of attributes defining each event. Applying the template to an entity 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 attribute 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 attribute 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 attributes 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 attribute to have the Multiline type.
  

Step 2: Create a post

Next, create a new post on the entity, and in the top-right dropdown menu, select Attributes. The post will display this template instead of a block of text. Give your post a title, check that all settings are as desired, and save. If you’re happy with the timeline occupying its own post, you’re all set!

Step 3: Move the timeline to another post/entry (optional)

If you prefer, you can easily move the timeline to any other post, or to the main entry. Simply edit the entry or post 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 post 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 post, 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):