How to add related image and title to every post

Help
1

When we click on the post in that we are only able to see the content we write in the markdown file.

But additional to that how we can add the image (related to the post) on the top of every post.

2

With a combination of YAML Front Matter data and additions to your Liquid based layouts or includes.

The simplest method would be something like this.

Post/page YAML Front Matter

related_image: /path-to-your-image.jpg

Liquid for layout or include

{% if page.related_image %}
  <img src="{{ page.related_image }}" alt="">
{% endif %}

Which would output the following HTML when related_image is populated in a post or page.

<img src="/path-to-your-image.jpg" alt="">

If you search around you should be able to find a ton of tutorials about this as it’s a core principle when building layouts with Jekyll.

3

Nope, it didn’t work.

{% if post.image %}
  <div style="background-image: url({{ post.image }})">
	<h1 class="headline">{{ post.title }}</h1>
  </div>
{% endif %}
4

Your code is bad and referencing the wrong object.

card.image should probably be post.image

Have to be mindful of which object your trying to pull data from. If it’s a page variable it’ll be page.whatever… in a {% for post in site.posts %} loop it’ll be post.whatever… variables from your _config.yml it would be site.whatever, etc. etc. etc.

5

Typing mistake.

Okay. Let me give it a try.