Accessing custom front matter variable in collection documents - html

Question

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?

Answer 1

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