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 making a post show your entity’s attributes, you can have 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 could also use the option to show attributes in a dashboard’s entity preview widget to show one or more timelines on your front 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!
  

Set up

This plugin relies on two types of attributes: one for the timeline’s overall settings, and any number of attributes to define each event. Applying the template to an entity will create one of each with sample values to guide you. Both of them contain a series of options and values separated like so: option1=value|option2=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 options:

• 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 option 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 (11 markers including year 0).
  
• name: An optional name for your timeline, displayed prominently above it.

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 options:

• row: Multiple events can share the same row if their periods don’t overlap. This option 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.
  
• 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 a 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.
  

Moving the timeline to another post or entry

Once set up, moving the timeline is very easy. Just 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:

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

The timeline’s post will then be removed from the page to keep it clean, and when the page is viewed by a campaign admin, they will see a small edit link above the timeline to edit the post, should they need to change its permissions or other settings. (To delete the post entirely, first remove the above code and it will return to normal.)

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
  

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