4

Looping through the collection and modification of the class according to how mu...

 3 years ago
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.
neoserver,ios ssh client

Looping through the collection and modification of the class according to how much is shown

advertisements

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 %}


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK