Search code examples
imagejekyll

Feature-image not showing for posts Jekyll

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.

Solution

  • 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>