In Jekyll How do I grab a post's first image?

Question

In my index of blog posts I'd like to grab the first image from the post to display it in the index using just liquid so it works on github pages.

I have a feeling split is the way to go, but I'm not good with liquid.

I'd like to be able to get the image url and put it in a variable to style it.

The ideal solution would be something like:

{% for post in site.posts %}     <li>       <a href="{{ post.url }}">{{post.content | first_image}}</a>     </li>   {% endfor %} 

Any ideas?

Answer 1

You can define a custom variable to your Front Matter called "image", so it's going to work like Wordpress's posts Featured Image:

--- image: featured-image.jpg --- 

Note to remember where is your image saved. In my case, I created a directory called "imagens" (PT-BR here). Then, go to your index.html and add the image to your template, wherever you want. In my site it looks like this:

<ul class="post-list">     {% for post in site.posts %}       <li>         <h2>           <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>         </h2>         <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>         <span class="post-meta">por</span>         <span class="post-meta">{{ post.author }}</span>       </li>        //IMAGE       <img src="{{ site.baseurl }}/imagens/{{ post.image }}">       //IMAGE         {{ post.excerpt }}       <a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>     {% endfor %}   </ul> 

That's it.

Answer 2

Some solutions to your problem :

1 - Use the Post Excerpt tag Documentation is here

Your post :

--- layout: post title: Testing images --- ## Title Intro Text ![Image alt]({{ site.baseurl }}/assets/img/image.jpg "image title") More intro text  Some more text blah ! 

Your template :

<ul>   {% for post in site.posts %}     <li>       <a href="{{ post.url }}">{{ post.title }}</a>       {{ post.excerpt }}     </li>   {% endfor %} </ul> 

As your image tag appears before the excerpt_separator (\n\n = two newlines) it will be in the post excerpt.

2 - Use your post's Yaml front matter to store your image's datas

Post :

--- layout: post title: Testing images  images:    - url: /assets/img/cypripedium-calceolum.jpg     alt: Cypripedium Calceolum     title: Cypripedium Calceolum    - url: /assets/img/hello-bumblebee.jpg     alt: Hello bumblebee !     title: Hello bumblebee ! ---  Intro here yo ! <-- THIS IS THE EXCERPT  Post body begin, and first image not in excerpt {% assign image = page.images[0] %} <-- first element of the array is zero {% include image.html image=image %}  Some more text blah ! {% assign image = page.images[1] %} {% include image.html image=image %} 

_includes/image.html (centralized in an include for standardization, but can be in the template) :

<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}"> 

The index page :

<ul class="posts">   {% for post in site.posts %}     <li>       <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>       <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>       {{ post.excerpt }}       {% assign image = post.images[0] %}       {% include image.html image=image %}     </li>   {% endfor %} </ul>