Home Forums Particles Support Timeline Joomla – How to display only start year and end year Reply To: Timeline Joomla – How to display only start year and end year


Tony
Moderator

Hi there,
It’s possible but you need to modify and remove the existing date field for timeline items and then define the first/last item using loop.first and loop.last. Example.

{% if display.date.enabled %}
{% if loop.first %}

<div class="tm-timeline-date"{{scrollspy_cls}}>
<span class="tm-date{{ date_style }}"><i class="fa fa-calendar-check-o" aria-hidden="true"></i>
    Start Here
</span>    
</div>

{% endif %}
{% endif %}

and

{% if loop.last %}

<div class="tm-timeline-date jl-text-right"{{scrollspy_cls}}>
<span class="tm-date{{ date_style }}"><i class="fa fa-calendar-check-o" aria-hidden="true"></i>
End Here
</span>
</div>

{% endif %}

Last, for item switcher on mobile/tablet devices, you can replace the item_date like this

{% set item_date %}

{% if loop.first %}

    <div class="jl-card-badge jl-label{{ img_padding ? ' jl-position-top-right' : '' }}">
    Start Here
    </div>

{% endif %}
{% if loop.last %}

    <div class="jl-card-badge jl-label{{ img_padding ? ' jl-position-top-right' : '' }}">
    End Here
    </div>

{% endif %}

{% endset %}

NOTE: In this case, you need to define the custom text for start and end date. You can define the text fields via jltimelinejoomla.yaml and receive the output via jltimelinejoomla.html.twig

Screenshot: https://imgur.com/kxB4awF

All Joomla 4 templates and Wordpress themes updated with new features and bug fixes Download Now
Cyber Monday is finally here! Save 30% OFF everything. Use promo code: 30OFFCM Shop Now