js

3 ways to sort your content pages entries

The new content pages can display content in just a couple of clicks with virtually no additional code. This powerful tool allows us to display data, create paths, and automatically classify information.

Content pages can modify the look and feel of your websites and even perform advanced processes on the data displayed, such as, filtering or sorting according to custom categories.

Sorting records is a standard and valuable process for users because it allows them to know which are the most recent records or highlight information automatically, so let's learn three different ways to organize the entries of a content page.

All the properties we use here - and many more! -  are available in the "Entry Attributes" dropdown of your content page.



1-Sort by creation date

Let's start here by using the code that is automatically generated in the index template when creating a content page:

<div>
  
</div>

As we can see here, we have a value called "entries", which contains an array or list that contains all the entries defined when creating the content page.

To order a specific list, we must assign it a new variable, which means we have to make two minimal changes in the code. The first is to create where it will be stored sorted like this:

This variable contains all the sorted records, and we need to display them inside the HTML.

The next step is to update the loop to use this new variable.

<div>
  
</div>

That's it! Now the information will be displayed sorted by date of publication.


2-Sort by update date

Sorting a list by update date can help to keep the latest, content on top, the process in this case, use the same code but replaces the value of "sort_by" to "updated_at".

Let's take the opportunity to examine the fields, "sort_by" is an order filter and has two values; the first is the selection criteria, the second is the order, which can be ascending ("asc") or descending ("desc").

3- Sort by alphabetical order

The third and last option is great for product catalogs or long datasets that need quick browsing, and now that we know the code and the syntax, this last option is the easiest to learn. We only need to change the order property to "name".


Conclusion

Content pages are quick and easy to use, but with a couple of extra lines of code we can take it further to customize the experience. 

You can find more information about the Liquid syntax in Modyo Docs



Photo by Andre-taissin via unsplash

By

Carlos Solis

Carlos Solis