Image path with CSS

tips & tricks
1

Here is a neat little trick I came up with, just now, to fetch an image with CSS using a frontmatter parameter.

You can use this in elements where you want to use e.g. background-size:cover; or even (dare I say it) to fetch thumbnails in lunr.js search results without extra HTTP requests.

First in a post’s frontmatter define a parameter like so:

+++
og_image = “/images/some.jpg”
+++

And then in your templates call it like so.
<li class="index" style="background:url({{ .Params.og_image }});"></li>