CODE

Highlight Recently Edited Items

This utility provides a way to mark an item as ‘NEW’ when it has been edited, or added, in the last X number of days.

v1.0.0

  1. This is handy for highlighting recently edited, or newly created items, such as blog posts or custom module items.

    Firstly, if you have the ability to add custom properties to your module, it is recommended to add an additional field called ‘Ignore Updates’ (or similar). This is because there may be times when an admin wants to update an item (ie: fix a typo or other minor edit) and does not want it to then be highlighted on the front-end as a new item.

    Note: The ‘Ignore Updates’ feature is optional, and in some cases not possible, so to omit this condition simply remove this.IgnoreUpdates == false and from the IF statement below:

    Simply add the below code to the top of your list layout.

    Note: You can adjust the number of days threshold by changing the very first Liquid variable/assign (numberOfDays) from 7 to your desired number of days.

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
{% assign numberOfDays = 7 %}
{% assign isRecent = false %}

{% assign upDate = this.lastupdateddate  | date: "%s" %}
{% assign nowDate = "now"  | date: "%s" %}
{% assign diffDate = nowDate | minus: upDate %}
{% assign diffDays = diffDate | divided_by: 3600 | divided_by: 24 %}

{% if this.IgnoreUpdates == false and diffDays <= numberOfDays %}
{% assign isRecent = true %}
{% endif %}

  2. With this code in place, you now have access to a Liquid variable called isRecent in which you can use throughout the rest of your list layout code in various ways like; adding a class to your list item parent (for CSS targeting):

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
<li class="recent-{{isRecent}}">
    <!-- YOUR LIST CONTENT -->
</li>

    Or perhaps, even using it in a Liquid conditional statement to show an image banner:

    {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
<li>
    {% if isRecent == true %}<img src="/images/new-banner.png" alt="NEW">{% endif %}
    <!-- YOUR LIST CONTENT -->
</li>

    Simply adjust for your needs.

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.