Add background-image to post thumbnail

Help
1

Goal: Add a background image to a thumbnail. Exactly how this theme has it set up - http://artemsheludko.pw/flexible-jekyll/

Summary
After looking at the code, using post.img and adding img: path to the post front matter is the solution, but I’m not having any luck.

Here’s what I did:

Project Directory

directory
directory.jpg433×678 48.7 KB

Desired Effect

post-1
post-1.jpg957×171 71.9 KB

The problem: a tag and image not rendering

effect
effect.jpg1435×449 280 KB

Code for thumbnail:

 {% if post.img %}
  <a class="post-thumbnail" style="background-image: url({{"/assets/" | prepend: site.baseurl | append : post.img}})" href="{{post.url | prepend: site.baseurl}}"></a>
{% endif %}

Post front matter:

---
title: Limited Game of Thrones Bottles and Gift Sets have arrived!
category: news
layout: post
img: game-of-thrones-set.jpg
---

Full code Below:

<div class="article-box">
    {% if post.img %}
      <a class="post-thumbnail" style="background-image: url({{"/assets" | prepend: site.baseurl | append : post.img}})" href="{{post.url | prepend: site.baseurl}}"></a>
    {% endif %}
    <ul>
      {% for post in site.categories.news %}
      <li>
        <p>{{post.date | date: '%B %d, %Y' }}</p>
        <a href="{{post.url}}"><h2>{{post.title}}</h2></a>
      </li>
      {% endfor %}
    </ul>
  </div>
2

Couple of things to try.

  1. You have double quotes inside of more double quotes which is likely the issue.
  2. You have an extra space after append and before the : post.img

Revised code to try:

<div class="article-box">
    {% if post.img %}
      <a class="post-thumbnail" style="background-image: url({{ '/assets' | prepend: site.baseurl | append: post.img }})" href="{{ post.url | prepend: site.baseurl }}"></a>
    {% endif %}
    <ul>
      {% for post in site.categories.news %}
      <li>
        <p>{{ post.date | date: '%B %d, %Y' }}</p>
        <a href="{{ post.url }}"><h2>{{ post.title }}</h2></a>
      </li>
      {% endfor %}
    </ul>
  </div>
3

Hey, I thought the extra space before append was it, but no. The problem was I needed to add css to to show the background image and I needed to fix the html to the following:

From this:

<div class="article-box">
  {% if post.img %}
  <a class="post-thumbnail" style="background-image: url({{"/assets" | prepend: site.baseurl | append : post.img}})" href="{{post.url | prepend: site.baseurl}}"></a>
  {% endif %}
 <ul>
  {% for post in site.categories.news %}
  <li>
    <p>{{post.date | date: '%B %d, %Y' }}</p>
    <a href="{{post.url}}"><h2>{{post.title}}</h2></a>
  </li>
  {% endfor %}
</ul>
 </div>

To this:

<div class="article-box">
<ul>
  {% for post in site.categories.news %}
 {% if post.img %}
  <a class="post-thumbnail" style="background-image: url({{"/assets" | prepend: site.baseurl | append : post.img}})" href="{{post.url | prepend: site.baseurl}}"></a>
 {% endif %}
  <li>
    <p>{{post.date | date: '%B %d, %Y' }}</p>
    <a href="{{post.url}}"><h2>{{post.title}}</h2></a>
  </li>
  {% endfor %}
 </ul>
 </div>
4

I recommend that you use relative_url filter instead of prepend: site.baseurl.
relative_url will generate proper links with the site.baseurl already prepended with a slash if required.

say, the post.url and site.baseurl are the following respectively:

  • jekyll/2017/11/14/hello-world.html
  • /blog

Notice that the post’s URL doesn’t start with a slash /.
On using {{ post.url | prepend: site.baseurl }} you’d get (in the above scenario):

/blogjekyll/2017/11/14/hello-world.html

But on using {{ post.url | relative_url }}, you would have got

/blog/jekyll/2017/11/14/hello-world.html
1 Like
5

@ashmaroli Thanks for the tip! I was unsure how that worked until you explained it.