Fingerprinting resources used in CSS

support
1

Suppose I have a background-image: url('my-background.png'); rule in my CSS. I haven’t been able to make Hugo fingerprint that resource. Is there any way of doing so, or should I just include it in the static folder and leave it as is (no fingerprinting)?

Thanks!

2

Hi @alberto and welcome to the community!

Hugo does not manipulate the url part within CSS (as far as I know)—even if you use fingerprint and postCSS for CSS processing.

If you put your image under /assets/ it will not get published.

So your suggestion /static/[images/] is the best option.

P.S.: You can use params in CSS like this:

.test {
  color: {{ .Site.Params.themeSettings.defaultColor }};
}

I have never tested something like this with images.

3

You need to somehow make it so Hugo treats your CSS as a template (resources.ExecuteAsTemplate?), then you can do:

background-image: url('{{ (resources.Get "my-background.png" | fingerprint ).RelPermalink }}')

Etc. The above assumes a file in assets/my-background.png.

3 Likes
4

Very cool, indeed!

5

Thanks to both of you! The solution given by @bep works like a charm. Thank you!! :smiley: