CODEWITHSUNDEEP
jekyll
Wasabi Developer
Wasabi Developer

Reputation: 3553

Adding a class to a post in Jekyll

I've got the following Jekyll index

---
layout: default
title: My favourite sandwiches
---

<section class="home">
  {% for post in site.posts %}
    <article class="column">
      <img src="{{ post.image }}">
      <a href="{{ post.url }}">{{ post.title }}</a>
    </article>
  {% endfor %}
</section>

My site will have 3 articles (blocks) next to each other, like tiles.

However, I would like to add a class on the first and third article tag so I can add different styling.

I wanted to know how to add this behaviour and if there is a way to index something eg. class="first" if index == 3/1

The html I wanted is to look something like this

<section class="home">
    <article class="column first">
      <img src="images/bigsandwich.jpg">
      <a href="site.com/post/bigsandwich.html">My big sandwich</a>
    </article>

    <article class="column">
      <img src="images/icecreamsandwich.jpg">
      <a href="site.com/post/bigsandwich.html">Icecream sandwich</a>
    </article>

    <article class="column last">
      <img src="images/sushisandwich.jpg">
      <a href="site.com/post/sushisandwich.html">Sushi sandwich</a>
    </article>
</section>

Thanks you for your patience and time.

Upvotes: 1

Views: 1314

Answers (1)

Yi Zeng
Yi Zeng

Reputation: 32885

Liquid's for loops have helper variables available, like forloop.first and forloop.last. See documentation here.

In your case, I would try:

---
layout: default
title: My favourite sandwiches
---

<section class="home">
  {% for post in site.posts %}

    {% if forloop.first %}
      <article class="column first">
    {% elsif forloop.last %}
      <article class="column last">
    {% else %}  
      <article class="column">
    {% endif %}

      <img src="{{ post.image }}">
      <a href="{{ post.url }}">{{ post.title }}</a>
    </article>
  {% endfor %}
</section>

Upvotes: 3

Related Questions