Cant access custom Front Matter variables

Question

Am creating my first Jekyll (using version 4.0.0) powered site. Problem is the variables in Front Matter are not recognized.

HTML in _includes (writing-post-featured-image.html)

<figure>
    <img class="feat-img" src="{{ site.baseurl }}/assets/images/{{ include.images }}" alt="{{ include.alt | default: 'lorem ipsum' }}" />
    <figcaption>{{ include.caption }}</figcaption>
</figure>

In _layout having layout for text based post pages (writings-post.html)

{% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}

Last, in .md file (under _posts) the following Front Matter

layout: writings-post
title: my title
permalink: /writings/:title
featured-image: photo.jpg
featured-image-alt: about photo
caption: photo caption

Output is empty

<figure>
    <img class="feat-img" src="" alt="lorem ipsum" />
    <figcaption></figcaption>
</figure>

Please help understanding why so. Thanks in advance.

Answer 1

The correct syntax on the page of the post is:

{% include writing-post-featured-image.html image=page.featured-image alt=page.featured-image-alt %}

Note the page. syntax, instead of the post. syntax. However, when you have a loop in your layout, you can use this:

{% for post in site.posts %}
  {% include writing-post-featured-image.html image=post.featured-image alt=post.featured-image-alt %}
{% endfor %}

Answer 2

Your syntax is incorrect.

1.) As your passing variables from your page, your include tag should look like this :

 {% include writing-post-featured-image.html 
    image=page.featured-image 
    alt=page.featured-image-alt 
    caption=page.caption %}

2.) In your include you have a syntax problem with include.images that should be include.image.

Note : as you're passing existing variables (not computed ones), you can skip passing them to your include, because from within an include you can see page's variables.

 {% include writing-post-featured-image.html %}

And your include :

<figure>
    <img class="feat-img" 
         src="{{ site.baseurl }}/assets/images/{{ page.featured-image }}" 
         alt="{{ page.featured-image | default: 'lorem ipsum' }}" />
    <figcaption>{{ page.caption }}</figcaption>
</figure>