Horizontal timeline with liquid syntax and slick js

1
votes

This horizontal timeline that I'm trying to achieve is using liquid syntax and slick js.

Here's my code to list out the timeline:

{% assign alltimeline = all_testimonials | articles_with_tag: "timeline" %}
{% assign alltimeline_sort = alltimeline | sort: 'sub_title' %}

<ul class="timeline d-flex flex-column">
   {% for timeline in alltimeline_sort %}
     <li>
        {{ timeline.sub_title }} //year
        {{ timeline.title }} //timeline title
        {{ timeline.body }} //timeline body
     </li>
   {% endfor %}
</ul>

However, this code will print out all item along with the year for each - something like this:

2008
Title One
Timeline Description One

2008
Title Two
Timeline Description Two

2008
Title Three
Timeline Description Three

2019
Title Four
Timeline Description Four

2019
Title Five
Timeline Description Five

However, what I'm trying to achieve is to display the year first, and then the item that is tagged under that year - something like this:

2008


Title One
Timeline Description One


Title Two
Timeline Description Two


Title Three
Timeline Description Three

2019


Title Four
Timeline Description Four


Title Five
Timeline Description Five

Below is the image that I'm trying to achieve

I'm trying to achieve this timeline design

1
javascriptcssliquidslick.js

1 Answers

0
votes

You can do this to check for a repeating year:

{% assign alltimeline = all_testimonials | articles_with_tag: "timeline" %}
{% assign alltimeline_sort = alltimeline | sort: 'sub_title' %}

<ul class="timeline d-flex flex-column">
   {% for timeline in alltimeline_sort %}
     <li>
        {% if lastsubtitle != timeline.sub_title %}
          {{ timeline.sub_title }}
        {% endif %}
        {{ timeline.title }}
        {{ timeline.body }}
     </li>
     {% assign lastsubtitle = timeline.sub_title %}
   {% endfor %}
</ul>