Hi again,
I try to go deeper in my learning curve of using External API and Twig in Cornerstone. This time I tried to filter API data. From the output perspective, it seems like the code is right as I see the data I wanted to grab. However, there are some issues with the layout.
The Twig filter is in a header element, nested in a div, which is part of a column. Column functions as a Looper Provider, while Div serves as a Looper Consumer. My API endpoint has a Raw Request parameter that limits data to just the current year. My Twig recent records filter sets a dynamic start date to the previous month, enabling it to fetch all data from that date onward, including future dates.
The problem is that items in the array that don’t meet the requirements are still taking up space before the desired output items, leaving an empty Div. Please take a look at the screenshot or check one of the events at the development site in the right sidebar. If we activate the icon for the Header Element or color Div’s background, we can see how many empty items are there. How to get rid of them? If the array would have other events not included into the filter after the date range set I guess there would be the same problem below the filtered content output as well. It applies to other Cornerstone Elements, I think. Grid for instance.
Just in case, here is the code of my filter in Twig:
{% set current_month = date()|date('m') %}
{% set start_month = current_month - 1 %}
{% set array = [ looper.item.StartDate|date("m") ] %}
{% for v in array|filter(v => v >= start_month) -%}
{{ looper.item.Name }}
{% endfor %}
{# outputs event names starting from the previous month #}