CODEWITHSUNDEEP
htmljekyllliquid
Ethan
Ethan

Reputation: 3798

Accessing custom front matter variable in collection documents

I have a Jekyll collection document in the collection coding:

---
title: 'iOS iConify'
rawname: iosiconify
image: {{site.img}}/z-iosiconify.png
layout: post
link: https://iosiconify.github.io/
---

Hi!

I'm trying to render all of the documents in the collection coding on an html page, and I have the following code:

  {% for post in site.coding %}
    <tr id="{{ post.rawname }}-desktop">
        <td id="left">
            <a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
                <img src="{{ post.image }}">
            </a>
        </td>
        <td id="right">
            <h2>{{ post.title }}</h2>
            <h4>{{ post.content }}</h4>
        </td>
    </tr>
    {% endfor %}

I'm referencing a lot of my custom front matter variables in it, such as {{ post.rawname }}. However, when the page builds the only part that works is {{ post.content }}.

Here is the rendered HTML:

                    <tr id="-desktop">
                        <td id="left">
                            <a href="" target="blank" id="-desktop-a">
                                <img src="">
                            </a>
                        </td>
                        <td id="right">
                            <h2></h2>
                            <h4><p>Hi!</p>
</h4>
                        </td>
                    </tr>

Do you have any idea why none of the custom front matter variables are working and how I can get them to work?

Upvotes: 1

Views: 212

Answers (1)

marcanuy
marcanuy

Reputation: 23942

There is an error in Front-matter that prevents Jekyll to correctly processing it, displaying only the content.

This line image: {{site.img}}/z-iosiconify.png should be image: z-iosiconify.png.

Then when displaying the documents preppend site.img like {{ post.image | prepend: site.img }}.e.g.:

{% for post in site.coding %}
<tr id="{{ post.rawname }}-desktop">
    <td id="left">
        <a href="{{ post.link }}" target="blank" id="{{ post.rawname }}-desktop-a">
            <img src="{{ post.image | prepend: site.img }}">
        </a>
    </td>
    <td id="right">
        <h2>{{ post.title }}</h2>
        <h4>{{ post.content }}</h4>
    </td>
</tr>
{% endfor %}

Upvotes: 2

Related Questions