Dynamic featured image? Eleventy + Njk

[benpages]

Hey all,

The hero section on my site features the most recent blog post. The background of the hero is the featured image of that post. https://www.whatifididnt.com

Here's how I'm applying the background currently. In the CSS file:
background-image: url("../assets/blog/one-bag-travel.jpg");

I am updating this manually. Is there a way that I could make it dynamic by automatically grabbing the featured image URL from the front matter of the most recent post?

Thanks,

-Ben

[pdehaan]

@benpages Two immediate options come to mind (one reasonable, one is... [almost comically] less so).

In no particular order:

---
# ./src/assets/site.css.njk
permalink: assets/site.css
---

{%- set latest = collections.pages | last -%}

.home__hero {
  background-image: url("{{ latest.data.hero }}");
}

By moving some of your CSS into an .njk template, we can fetch the newest item from our imaginary collections.pages collection and then dynamically set the background-image to the hero property from the front matter. For example, here's my ./src/pages/five.njk file:

---
title: Five
date: 2022-03-14
hero: ../assets/blog/five-bag-travel.jpg
---

<h1>{{ title }}</h1>

Eleventy will process the ./src/assets/site.css.njk file, and write the output as ./_site/assets/site.css (due to the permalink front matter) and then you just need to make sure your homepage or global layout file references the /assets/site.css file.

---

The other option was to change your CSS above:

-background-image: url("../assets/blog/one-bag-travel.jpg");
+background-image: url("../assets/blog/latest.jpg");

Then when you create a new blog post and create a new blog hero image, make a copy of the image and overwrite the previous version of ../assets/blog/latest.jpg. Requires less coding, but you still have to remember to overwrite the older "latest.jpg" asset each time you publish a new post, so probably doesn't save you much time/effort/mental space.

[pdehaan]

Published my sample repo here: https://github.com/pdehaan/11ty-2351

[benpages]

Brilliant, thanks! Didn't know you could create CSS files using njk.

I currently have all my CSS in a single styles.css file. Would you recommend I move all of it to this new site.css.njk file so everything is in one place?

[pdehaan]

Sure, if you want. Alternatively, keep your other non-dynamic CSS in something like ./src/_includes/base.css and then you can include the base.css with the dynamic assets/site.css:

---
# ./src/assets/site.css.njk
permalink: assets/site.css
---

{% include "base.css" %}

{%- set latest = collections.pages | last -%}

.block {
  background-image: url("{{ latest.data.hero }}");
}

I think it mostly depends on personal preference and whether it still works with your CSS linting/minification workflows (if that's a thing you currently do). Moving everything into a Nunjucks-ified format might make it trickier to run through stylelint since tools don't always like unexpected templating markup.

[benpages]

Thanks for the help!