Have you ever desired to incorporate an image at the beginning of your Jekyll post but lacked the knowledge on how to accomplish it? Fear not, for it is a simple task requiring only a small portion of code.

You can watch the video below and follow along with this post, which explains how I added a featured image1 at the beginning of all my posts. Yes, that’s right—for every single post, even those without an image set by me. It automatically uses a default image for all those posts where I didn’t set one.

Part 1: Add a featured image to your posts

Requirements

To effectively engage in this project and follow along the content outlined in the article and the video starting from the 7th minute, you will require the following items:

  • Basic HTML, CSS and Markdown knowledge.
  • Basic Jekyll knowledge. Check previous Jekyll posts for more content.
  • A funtional Jekyll site with at least two post files.
  • Some images to work with (located at assets/img/)

If you do not have much time but you have experience using Jekyll. I suggest you to watch the video from 12th minute, and jump to section 2:Modify the _layout/post.html file in this post.

Section 1 starts from the 7th minute of the video.

Add Image Path to YAML Front Matter

There are multiple ways to add an image into your post, using an html image tag or a markdown syntax. However, you can also add it by including an image field on the YAML Front Matter2. (video: Add image) By adding the image field in the YAML Front Matter, it also makes the image visible/appear at the preview for the post.

  1. Copy and past the code below to your YAML Front Matter:
1
2
3

---
image: /assets/img/featured-posts/default.jpg
---

📚 For more details on how to set featured image, visit the Front Matter Guide.

  1. Add the following code to display the image in your post. (delete the * from the code)
1

![alternative text]({*{ page.image }*})
  • Add the relative url in case your image is not displaying with the previous code. (delete the * from the code)
1

![alternative text]({*{- page.image | relative_url -}*})

Section 2 starts from the 12th minute of the video.

Modify the _layout/post.html file

In order to modify the layout of the post and display the featured image on top of every post, you need to locate and understand the post layout.

  1. Go to the _layout folder and open the post.html file

📚 If you are missing the _layout folder. Visit related issue on Stackoverflow or Jekyll themes docs.

  1. Choose where you need the featured image to be
  2. Add the code below to display the image.
1
2
3
4
5

<img
  src="/assets/img/featured-posts/design.jpg"
  alt="featured image"
  class="featured-image-post"
/>

Include a Default Image

  1. Include an if & else statement to the code from step 3 (delete the * from the code):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{*% include lang.html %*}
{*%- if page.image -%*}
<img
  src="/assets/img/featured-posts/design.jpg"
  alt="featured image"
  class="featured-image-post"
/>
{*%- else -%*}
{*%- assign postImage = "/assets/img/featured-posts/default.jpg" -%*}
<img
  src=""
  alt="Default featured image"
  class="featured-image-post"
/>
{*%- endif -%*}
Rendered Output

featured image

In order to modify the image style, you need to add some CSS.

  1. Go to the _sass folder and open the _layout.scss file

    📚 Missing the _sass folder? Visit related issue on Stackoverflow or Jekyll themes docs.

  2. Add the CSS code bellow

    The file name could be different, just look for the appropriate .scss file

1
2
3
4
5

.featured-image-post {
  width: 100%;
  height: 150px;
  object-fit: cover;
}



Part 2: Add featured images to the list of posts (blog roll, posts reel)

Modify the _layout/home.html file (Part 2)

In order to modify the layout of the blog roll or list of posts and display the featured image, you need to locate and understand the post layout.

  1. Go to the _layout folder and open the home.html file

    📚 Missing the _layout folder? Visit related issue on Stackoverflow or Jekyll themes docs.

  1. Choose where you need the featured image to be
  2. Add the code below to display the image on the blog roll.
1
2
3
4
5

<img
  src=""
  alt="blog roll image"
  class="blog-roll-image"
/>

Include a Default Image (Part 2)

  1. Include an if & else statement to the code from step 3 (delete the * from the code):
1
2
3
4
5
6

    {*%- if post.image -%*}
      <img src="{*{- post.image | relative_url -}*}" alt="" class="blog-roll-image">
    {*%- else -%*}
      {*%- assign postImage = "/assets/img/featured-posts/default.jpg" -%*}
      <img src="" alt="" class="blog-roll-image">
    {*%- endif -%*}
Rendered Output

blog roll image

In order to modify the image style, you need to add some CSS.

  1. Go to the _sass folder and open the _layout.scss file
  2. Add the CSS code bellow

    The file name could be different, just look for the appropriate .scss file

1
2
3
4
5
6

.blog-roll-image {
  width: 75px;
  height: 75px;
  object-fit: cover;
  float: left;
}

Acknowledgments 📚

Resources list that I find helpful and would like to give credit to.


  1. An image that represent the contents, mood, or theme of a post or page. ↩

  2. Placed at the top of a page and is used for maintaining metadata for the page and its contents. ↩