CODEWITHSUNDEEP
rubyyamljekyllliquid
Samuel
Samuel

Reputation: 6146

Custom yaml syntax

Im using Jekyll and liquid syntax and would like to add a custom background colour and thumbnail image for each of my projects on my homepage. How can I achieve this using YAML frontmatter?

liquid syntax outputting projects 

{% for post in site.categories['project'] %}
    <div class="project">
            <h3 class="project__title">{{ post.title }}</h3>
            <p class="project__description">{{ post.description }}</p>
            <a class="project__link" href="{{ post.url}}">view project</a>
    </div>
{% endfor %}

Upvotes: 0

Views: 140

Answers (1)

David Jacquel
David Jacquel

Reputation: 52829

In your project posts add background and thumbnail variables

myprojectpage.html

---
front matter variables ...
background: #ffffff
thumbnail: images/myproject.jpg
---

You can then use them in your loop :

{% for post in site.categories['project'] %}
  <div class="project" style="background:{{post.background}};">
    <h3 class="project__title">{{ post.title }}</h3>
    <img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="post.title">
    <p class="project__description">{{ post.description }}</p>
    <a class="project__link" href="{{ post.url}}">view project</a>
  </div>
{% endfor %}

Another option can be to simply add a class to your post and manage style in your css/scss/less file.

Upvotes: 1

Related Questions