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
Desired Effect
The problem: a tag and image not rendering
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>
Couple of things to try.
- You have double quotes inside of more double quotes which is likely the issue.
- 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>
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>
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
@ashmaroli Thanks for the tip! I was unsure how that worked until you explained it.