Passing something into a block

A block can be handed something to work with, which is what lets one card design serve a blog index, a homepage strip and a section page without becoming three near-identical copies.

The problem it solves

Write a card block that reads the page it is on, and it shows the same thing everywhere it appears. That is fine for a header and useless for a card in a list, where each card must show a different article.

Handing something in

On the render call, name it:

{% assign posts = collections.articles | sort: "date" | reverse %}
{% for post in posts limit: 6 %}
  {% render "aB3x9kQ2mN01", post: post %}
{% endfor %}

post: post reads as “call it post inside the block, and give it the post I am looking at right now”. The name on the left is what the block sees.

Using it inside the block

<article>
  <a href="{{ post.url }}">
    {% if post.image %}
      <img src="{{ post.image.src }}" alt="{{ post.image.alt }}">
    {% endif %}
    <h3>{{ post.title }}</h3>
    <p>{{ post.excerpt }}</p>
  </a>
</article>

The block now works for any page handed to it, which is the whole point: one card design, used by every list that wants cards.

A block only sees what it is given

It does not see what the surrounding page has assigned. If a block needs something, it has to be passed in — which is what makes a block predictable: reading it tells you everything it depends on.

Naming things

The name is yours. post: is conventional for an article and reads well, but item:, service: or person: are all fine and often clearer. Use the word that makes the block read like what it is for.