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 troughsite.page
, but only new collection's elements.- When calling
page.merge
on a collection item, Liquid tries to invoke theJekyll::Drop::merge
method which needs an argument, and not themerge
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
I Am Gettiing an Error Expected New Line While Compiling Sass
Vertical-Align and Inline-Block Behaving Annoyingly Different in Chrome and Firefox
Why Does Adding Float:Left to My CSS Make My Link Unclickable
Two Divs on The Same Row and Center Align Both of Them
Background Position, Margin-Top
Bootstrap Navbar-Static-Top Menu Breaks on Two Lines
Setting Listview <Li> Height in Jquery Mobile
Sprite Height Limitation for CSS Images
Fix Warning "Also Define The Standard Property 'Box-Shadow' for Compatibility"
How to Rotate a Font Icon 45 Degrees
Add Strikethrough to Checked Checkbox
Square Responsive Divs Using Bootstrap 4
Line Breaks When Using CSS "Display:Inline"
Applying a Clearfix to Nth-Child Without Additional Markup