Menu
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?
382
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
---
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 %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
