32 lines
1.5 KiB
HTML
32 lines
1.5 KiB
HTML
{% comment %}
|
|
|
|
Embed a TimelineJS feature, https://timeline.knightlab.com/
|
|
|
|
E.G. --> {% include feature/timelinejs.html %}
|
|
|
|
Embeds a TimelineJS built from a JSON file appropriate for any CollectionBuilder page (such as Home or About page).
|
|
CB templates automatically generate a timelinejs json file in "assets/data/timelinejs.json" including all items in metadata with a value in "date" field.
|
|
By default, this include uses this json file.
|
|
|
|
Options:
|
|
- "json" = (optional) path or link to timelinejs json file.
|
|
|
|
{% endcomment %}
|
|
{%- assign json = include.json | default: '/assets/data/timelinejs.json' | relative_url -%}
|
|
<!-- timelinejs, https://timeline.knightlab.com/ -->
|
|
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
|
|
|
|
<div id="timeline-embed" style="width: 100%; height: 800px" class="mb-4"></div>
|
|
|
|
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
|
|
<script type="text/javascript">
|
|
// The TL.Timeline constructor takes at least two arguments:
|
|
// the id of the Timeline container (no '#'), and
|
|
// the URL to your JSON data file or Google spreadsheet.
|
|
// the id must refer to an element "above" this code,
|
|
// and the element must have CSS styling to give it width and height
|
|
// optionally, a third argument with configuration options can be passed.
|
|
// See below for more about options.
|
|
timeline = new TL.Timeline('timeline-embed', '{{ json }}');
|
|
</script>
|