Search code examples
jekyllliquid

Jekyll Can't Get Post Image to Show on Post


On my front matter, I have:

image: SNKRS.jpeg

On my post layout, I have:

---
layout: "wrapper"
---

<section class="postlayout">
      <div class="postsummary">
        <h1>{{ page.title }}</h1>
        <p>{{ page.description }}</p>
        {% if post.image %}
          <img src="{{ site.baseurl }}/assets/blogimages/{{ post.image }}" alt="{{ site.baseurl }}{{ post.title }}"">
        {% endif %}
      </div>
</section>
<section class="postbody">
  {{content}}
  {% include lazyload.html %}
</section>

But on the post, the image isn't being pulled. It only pulls if I have a {% for post in site.posts %} around the code. But when I use that, it pulls all the posts on the website instead of just the current post.


Solution

  • If your goal is to get the image from the Front Matter of the post, this code may help you.

    Layout post file: ..\_layouts\post.html

    <section class="postlayout">
      <div class="postsummary">
        <h1>{{ page.title }}</h1>
        <p>{{ page.description }}</p>
        {% if page.image %}
          <img src="{{ page.image }}" alt="{{ page.title }}"">
        {% endif %}
      </div>
    </section>
    

    NOTE: remember to add this information to the post's Front Matter.

    Markdown post file: 2020-05-12-my-post.md

    ---
    title: "I'm the title of Post."
    description: "I'm the description of the post."
    image: /assets/blogimages/name_of_image.jpg
    ---
    

    TO BETTER UNDERSTAND (added after replying).

    Why am I using page.image rather than post.image?

    Because, in the example posted in your question, you are treating the .html or .md file as a page, rather than as a post.

    The variable page, of page.image, is an official Jekyll variable. While the variable post, of post.image, is not an official Jekyll variable so it does not exist unless explicitly declared (here more info: Jekyll Variables)

    Read below to understand.

    If you use the variable page.image Jekyll takes the content present in the variable image from the Front Matter of the page (by default a page is a file page-name.html contained in the root directory of the Jekyll project). Note that here the .html file is therefore treated as a page. You can also create a page using the page-name.md file so as to use the advantages of the MarkDown syntax, but then you should associate it with a layout that could be blog.html appropriately placed in the _layout directory.

    If you want to treat a YY-MM-DD-post-name.md file as a post, you must first insert the file in the _posts directory of the Jekyll project. Then you will have to create a page (or layout), for example blog.html with the code that goes to list all the existing posts. To do this you need to create a loop that iterates every .md file in the _posts folder.

    The following code is a typical example:

    <ul>
      {% for post in site.posts %}
        <li>
          <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
          <img src="{{ post.image }}" alt="{{ post.title }}">
        </li>
      {% endfor %}
    </ul>
    

    In the second line the variable post will contain the values ​​present in the Front Matter of each single post. From here we understand that site.posts is treated as an array and we need the for loop to access every single element of the array .

    So using the for loop we can access the title of the post via post.title variable or the image via post.image variable.

    Without using the for loop, we could also access the values ​​of the array by specifying the position of each element in the array, as in the following example:

    <h2>{{ site.posts[0].title }}</h2>
    <img src="{{ site.posts[0].image }}" >
    

    With the example above we access the elements in position 0 of the array but it is obviously a useless method that does not exploit the power of the for loop.

    More info here: Jekyll List posts