0

I have the following HTML with Tailwind classes to display a full screen header image in Statamic CMS:

<header class="w-full h-full bg-[url('/img/headers/robert-patient-blue-overlay.png')] bg-cover bg-center flex justify-center items-center">...</header>

and have been trying to replace /img/headers/robert-patient-blue-overlay.png with {{ header_image }} so that is can be edited in the CMS, but I'm not sure if it's possible.

using [url('"{{ header_image }}"')] doesn't work, nor does [url("{{ header_image }}")] or [url({{ header_image }})]... is it just not doable?

Thanks!

John Dawson
  • 443
  • 3
  • 10
  • 28

1 Answers1

1

It's not doable. This is because Tailwind scans your source code as plain text, so it sees bg-[url({{ header_image }})] literally. Thus, it sees the strings bg-[url({{, header_image and }})] which are all invalid Tailwind classes.

As a work-around, you could consider using the style attribute instead like:

<header class="…" style="background-image: url({{ header_image }})">
Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • Okay, thanks, makes sense. It didn't like the above, unfortunately. I tried `style="background-image: url('{{ header_image }}')"` and VS Code didn't complain about that, but it still doesn't display. I guess it's not possible... – John Dawson Jul 12 '23 at 12:33
  • sorry, don't mean console, I meant the source code in the inspector in the browser – John Dawson Jul 12 '23 at 13:00
  • Your latest comment should work. That's how I do it in Antlers too. Maybe you didn't set your field markup properly. You may have to set max_files = 1 in your field's blueprint to be able to call out the image in a single tag like you have done above. Another way to debug is to see what URL is being rendered on the browser's console/inspect element. You'd see what's missing precisely there. Last resort, write {{ header_image | dump }} in your antlers file to see if there's any value there. – eYinka Aug 31 '23 at 14:15