Feature-image not showing for posts Jekyll

1
votes

I am building a Jekyll site and would like to have feature-imgs on posts show page. I thought I had the Front matter correct with the right file path to my image but for some reason the image still won't show up.

Front matter

---
layout: post
title: My Coding Journey
feature-img: "/img/journey.png"
---

My images are in a folder in project root called img.

Post layout:

---
layout: post-header
---
<article {% if page.feature-img %} class="feature-image"{% endif %}>
  <section class="post-content">{{ content }}</section>
</article>

<!-- Disqus -->
{% if site.theme_settings.disqus_shortname %}
<div class="comments">
  {% include disqus.html %}
</div>
{% endif %}

Any idea why the feature image is not working.

1
imagejekyllfeatured
Does this solve your problem feature-img: "./img/journey.png" ? I added a period in front of the image path. – Ivan86
No. That didn't work, thanks though. – Joseph
try something like this feature-img: "./../img/journey.png" or this feature-img: "./../../img/journey.png" – Ivan86
Did any of those work? – Ivan86
No, they didn't work. – Joseph

1 Answers

2
votes

You need an img tag to render the image.

---
layout: post
title: My Coding Journey
feature-img: "/img/journey.png"
---

and in the layout...

<article>
  {% if page.feature-img %}
    <img class="feature-image" src={{ page.feature-img }} alt="Feature Image"/>
  {% endif %}
  <section class="post-content">{{ content }}</section>
</article>