# How to add related image and title to every post

**URL:** <https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715>\
**Category:** Help\
**Created:** [June 27, 2017, 6:55pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715 "2017-06-27T18:55:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [June 27, 2017, 6:55pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715/1 "2017-06-27T18:55:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [June 27, 2017, 7:00pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715/2 "2017-06-27T19:00:11Z")

</div>

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**

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

```

**Liquid for layout or include**

```auto
{% 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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [June 27, 2017, 7:10pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715/3 "2017-06-27T19:10:49Z")

</div>

Nope, it didn’t work.

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

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [June 27, 2017, 7:26pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715/4 "2017-06-27T19:26:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [June 27, 2017, 7:30pm UTC](https://talk.jekyllrb.com/t/how-to-add-related-image-and-title-to-every-post/715/5 "2017-06-27T19:30:21Z")

</div>

> [@mmistakes](#):
>
> card.image

Typing mistake.

Okay. Let me give it a try.