website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
32min

Blog Archive

Browse by Month and/or Search Blog Posts Between Two Dates

Introduction

This article will show:

  • How to add a parameter to the main Blog Module "include" Liquid Tag to enable advanced filtering by "Release Date".
  • How to include the Archive Navigation Feature
  • An explanation of the three main sub-Layouts available in in the Default Layout: (1) Search Between Two Dates (2) Browse By Months (3) Browse by Months under Year Header.
  • How to give User Feedback about Search Results
Document image

Adding the Advanced Search Parameter

The "Archive" Blog Navigation features all depend on the Advanced Search feature. In order to enable this dependency, you will need to add a parameter on the Page where you initially included a Blog Module: use_adv_search: 'true' Note- the word true must be in single quotes.

In the Starter Site example below, the Module is initially included on the Blog Page, so we will do it here. We also switch to the default layout as this contains the updated examples.

Document image

To Include the Archive Navigation Feature

Firstly, you will need to provide the following Liquid to include your Archive layout:

HTML
|

In the default layout, this Liquid would be placed inside the sidebar/wrapper.liquid file, but this is optional.

Parameters

  • archive_layout- The layout parameter refers to the main layout folder followed by a path to the folder storing any archive layouts you are using. In the example, an /archive folder is used.
  • archive_layout_type  - The type parameter refers to the name of the Archive Layout file. 

In the default/archive/ folder we have 3 different optional types of Archive Layout you can choose by entering their names in the type parameter. We will show the liquid tag for including each. Include: Browse By Months

HTML
|

Include: Browse By Months Under Years Header

HTML
|

Include: Search Blog Between Two Dates

HTML
|

Blog Archive Layouts

The following examples will take you through the different options:

Browse by Month

Document image
HTML
|

In this example, we use the blog_archive_months object and loop over the array. For each iteration, a link is outputted which has two range parameters:

  • range_gte= An epoch format date for midnight on the beginning of the first day of the selected month
  • range_lt= The date above + 1 month. We don't use `lte` because the date is the first valid date in the next month- we want every date up until then.

Browse by Months, organised into Years

This Layout does not just organise the Months available under the relevant Year Headers, it also will skip any Years without a Blog Post.

Document image
HTML
|

This example uses the same links as the previous one. However, it also organises the links into the years in which they belong by first looping over the years in the blog_archive_years and then using the group_by liquid filter and another loop to output the month links grouped under the current iteration's year. Learn more about this Liquid at the pOS docs:

  • group_by filter
  • for loop

Search Blog Posts between two dates

In the Default Layout, this Option also includes the Previous "Browse by Months Organised into Years" Option for convenience- though the code can be simply removed if you prefer. We have removed it in this article's example.  It also adds a Form for directly manipulating the URL parameters to find the exact dates the User is interested in.

Document image
HTML
|

In this example a form is used to take user input. The Siteglide function automatically adds the dates to the URL parameters in the correct format. You can rewrite the error function to customise the way the form handles invalid dates entered.

A note about Date Entry Inputs on different Browsers Different Browsers may display the Date Input fields very differently. 3rd party Javascript Plugins are available for making sure these display with your desired Design. 

Custom Layouts

This is a relatively complex feature, so some understanding of Liquid will be necessary to understand how to create a Custom Layout. The best way to start would be to copy one of the Default layouts and edit it to provide the changes you need.

Any Layouts included with the above Liquid will get access to the blog_archive_yearsand blog_archive_monthsarrays, which contain detailed data about the years and months respectively which contain valid Blog Posts. This can be used to generate dynamic buttons to the User so they can browse.

blog_archive_years

HTML
|

blog_archive_months

HTML
|

In order to filter the Blog list by date, you need to refresh the Page URL with parameters in the Unix Epoch time format. 

The following URL Parameters will cause Results in the List to Filter and more than one can be added:

  • range_gt - greater than - this will filter for Blog posts after the given date.
  • range_gte - greater than or equal to - this will filter for Blog posts on and after the given date.
  • range_lt - less than - this will filter for Blog posts before the given date.
  • range_lte - less than or equal to - this will filter for Blog posts on and before the given date.

 For the above to work, remember to set the use_adv_search: true parameter (see start of article)!

The pOS documentation website has some useful tips on how to use liquid to convert date formats and manipulate dates and times. See the following useful filters, and browse the docs for more:

  • localize
  • date
  • add_to_time

Feedback for the User

Document image

In the examples, you may notice another URL parameter is used: range_type. The s_blog_date_search Siteglide function for filtering blog posts by user-inputted dates adds the parameter range_type="between". This would allow the following liquid on the List Layout to identify that this search is between two dates:

HTML
|

Whereas, you could use another range_type to indicate that different feedback should be given to the User. e.g. the parameter month in this example changes the sentence structure from "posts between" to "posts from" to communicate the different kind of filtering that is now taking place.

HTML
|

Note - in both of these examples- the gte and gt  dates are both outputted- this is because only one is expected to be available. The Layout is designed to accept either.

Updated 08 Apr 2021
Did this page help you?
Yes
No
UP NEXT
Browse by Keyword
Docs powered by archbee 
TABLE OF CONTENTS
Introduction
Adding the Advanced Search Parameter
To Include the Archive Navigation Feature
Parameters
Blog Archive Layouts
Browse by Month
Browse by Months, organised into Years
Search Blog Posts between two dates
Custom Layouts
Feedback for the User