CODEWITHSUNDEEP
jekyll
Matt Smith
Matt Smith

Reputation: 2158

How Can You Get Thumbnails for Jekyll Posts When the Post Has No Images?

If I'm using Jekyll to build a blog and I want to share the link to posts. I'd like to have a preview thumbnail for the posts, however, the post itself has no images on it, and I'd like to keep it that way. Any ideas on how do that?

Upvotes: 6

Views: 6746

Answers (2)

Matt Smith
Matt Smith

Reputation: 2158

I found the solution I needed.

Following the Open Graph Protocol, if a post has a thumbnail image available for sharing via Facebook, Twitter, etc., you can specify your <head> open graph metadata like this.

{% if page.image %}
  <meta property="og:image" content="path/to/post/image.jpg">
{% else %}
  <meta property="og:image" content="path/to/page/image.jpg">
{% endif %}

If the post doesn't have a specified image it will use the image specified for the page. Then add the following to the post's front matter:

---
image: path/to/post/image.jpg
---

Upvotes: 13

Kevin Workman
Kevin Workman

Reputation: 42174

You could define a thumbnail attribute in each post's front matter, then use that when you create the page containing links to your posts.

Here is an example blog post:

---
layout: default
thumbnail: "/path/to/the/thumbnail.png"
---
This is a blog post!

And then in your blog's index.html page, you'd do something like this:

{% for post in site.categories.blog %}
    <div>
        <a href="{{ post.url }}" ><img src="{{ post.thumbnail }}" />
        <a href="{{ post.url }}" >{{ post.title }}</a>
    </div>
{% endfor %}

Upvotes: 8

Related Questions