Jekyll accessing page variables from CSS

Question

I'm trying to set a background-img in my css.liquid file, and I need to get YAML variables in the page. How can I do that? This is what I have so far:

background-image: url({{ page.locales[page.default_locale][page.first_name] }});

I also had this:

background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');

found a similar question here: http://stackoverflow.com/q/4305955/2609042 — Aaron Chiao, Feb 27 '15 at 15:16

score 2 · Answer 1 · answered Jan 30 '16 at 22:04

2

Just use these styles 'inline' and not in your css.liquid file. That is by far the easiest (and least ugly) solution.

answered Jan 30 '16 at 22:04

Mr. Hugo

11,887
3
42
60

score 1 · Answer 2 · answered Sep 04 '13 at 04:02

1

Only files with a YAML front matter section, and with the extensions .html, .markdown, .md, or .textile get processed by Jekyll.

You could hack this to get it working by saving your CSS file with one of those extensions, and including a YAML front matter section. That seems like a pretty clumsy way to do it, and it'll make for some ugly code, but it might work.

answered Sep 04 '13 at 04:02

Brian Willis

22,768
9
46
50

Could you please add some reference? Thanks. – Yan Foto Jun 02 '16 at 12:05

score 0 · Answer 3 · edited May 23 '17 at 12:25

0

You need to add ---\n--- at the top of the css file, like so:

---
---

.myClass {
   background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');
}

As mentioned here: https://stackoverflow.com/a/42528645/2235593

edited May 23 '17 at 12:25

Community

1
1

answered Mar 01 '17 at 21:36

Harry Mumford-Turner

856
10
17

Jekyll accessing page variables from CSS

3 Answers3