Looping through the collection and modification of the class according to how mu...
source link: https://www.codesd.com/item/looping-through-the-collection-and-modification-of-the-class-according-to-how-much-is-shown.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Looping through the collection and modification of the class according to how much is shown
I currently have an events
collection like so in my _config.yml
:
future:true
collections:
events:
output: true
permalink: /:collection/:name
I am trying to only show the next 4 future posts. However, I want to change the class of it's container based on if there is 0 or 1, 2 ,3 or 4 posts that are going to show up.
{% assign curDate = site.time | date: '%s' %}
{% for event in site.events %}
{% assign postStartDate = event.date | date: '%s' %}
{% if postStartDate >= curDate %}
<div class="SOMETHING">{{event.title}}</div>
{% endif %}
{% endfor %}
So if there is 1 post that has postStartDate >= curDate
I want to use class .full
, 2 posts: .one-half
, 3 posts: .one-third
, 4 posts: .one-quarter
.
Does anyone now how I can count and determine this?
Try this
{% assign curDate = site.time | date: '%s' %}
{% assign post_count = site.events | size %}
{% if post_count == 1 %}
{% assign css_class = "full" %}
{% elsif post_count == 2 %}
{% assign css_class = "one-half" %}
{% elsif post_count == 3 %}
{% assign css_class = "one-third" %}
{% else %}
{% assign css_class = "one-quarter" %}
{% endif %}
{% for event in site.events %}
{% assign postStartDate = event.date | date: '%s' %}
{% if postStartDate > curDate %}
<div class='{{css_class}}'>{{event.title}}</div>
{% endif %}
{% endfor %}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK