Params appears in an ambiguous context within a URL

I have html template for inline css below

{{ if and (eq .Type "collection") (eq .Params.layout "list") }}
    .hero-bg::before { background-image: url(/uploads/{{ .Params.hero_bg | safeCSS }}); }
    {{ with $collListStyle }}{{ .Content | safeCSS }}{{ end }}
{{ end }}

the result was error

{{.Params.hero_bg | safeCSS}} appears in an ambiguous context within a URL

any idea?


CSS background image URLs need to be quoted

Edit: something like:

.hero-bg::before { background-image: url('{{ printf "/uploads/%s" .Params.hero_bg | safeCSS }}'); }

1 Like

No luck still the same error, but strangely it works in homepage condition without quote at all

{{ if .IsHome -}}
    .hero-bg::before { background-image: url(/uploads/{{$.Site.Params.hero}}); }
{{ end }}

This works for me for homepage and regular pages. I supplied front matter as

hero_bg: some-img.jpg

What does that param actually look like?

I’m using colon

hero_bg: "some-img.jpg"

Me too. It’s YAML, so those values are equivalent.

Since your error cannot be reproduced off the original code snippet, you need to share your repo, or create a small sample project that reproduces your issue and share that.

1 Like