How to Use Liquid Tags in CSS to Have Jekyll Use a Different Background Image on a Per-Page Basis

Can I use liquid tags in css to have jekyll use a different background image on a per-page basis?

The easy way to do this? Set the image with an inline style direct in your post layout, e.g:

<div class="page-background"
{% if page.bgimage %}style="background-image: url({{ page.bgimage }})"
{% endif %}>

Of course, while not as sound from a semantics standpoint it's not ideal but it does mean you can create background images for posts by only adding to your front-matter and not making css additions as well. It's exactly what I'm doing on my site posts.

Use liquid in css file within Jekyll environment

You can use absolute_url to automatically prepend the url and base_url in liquid but that should be done in your templates:

{{ "/assets/style.css" | absolute_url }} 

The generated url shouldn't have _site in it, as that won't work in Github pages. In your template refer to your css location, in this case /assets/style.css:

<link rel="stylesheet" href="{{ '/assets/style.css' | absolute_url }}">

Jekyll - can you use liquid to reference front matter variables

Inline styling is the most acceptable method. You define a page variable that is specific for this page, therefore it does not belong in the global stylesheet (IMO). You should do it like this:

Create a .md file like this:

---
section-1-color: #222222
layout: default
---

Lorem ipsum

Creat a layout file (default.html) like this:

<section class="section-1" style="background-color: {% page.section-1-color %};">
{{ content }}
</section>

But... to answer your question: It is possible, see this answer.

Include another page with Jekyll without displaying Front Matter

A fragile hack:

{% capture source %}{% include_relative included.html %}{% endcapture %}
{{ source | split: "---" | last }}

Just don’t use --- anywhere in the included document. :)

Using a collection for sub pages in Jekyll results in Liquid Exception

The error is raised when you call page.merge. Because :

  • site.pages is already a special group of pages, replacing it by a pages collection is not specially a good idea. Once done, you no longer can reach originals pages trough site.page, but only new collection's elements.
  • When calling page.merge on a collection item, Liquid tries to invoke the Jekyll::Drop::merge method which needs an argument, and not the merge property set in front matter.

Solution : Don't set pages as a collection.

Can you use Jekyll page variables in a layout?

I'm pretty sure this would work:

---
title: xxx
style: |
/* You can put any CSS here */
/* Just indent it with two spaces */
/* And don't forget the | after "style: " */
h2 {
color: red;
}
---

Your markdown/textile goes here. h2s will be red

And then in your layout:

<style type="text/css">
{{ page.style }}
</style>

And that should be it.



Related Topics



Leave a reply



Submit