Is there something like BaseURL but absolute or relative depending on settings in config.toml?

support
1

I’m attempting to make the Material-Design theme compatible with both absolute and relative URLs.

I’m mostly there but have hit a snag.

There is some embedded CSS in the header partial that calls an image. Because it’s not an href Hugo doesn’t know to rewrite it depending on the value of relativeurls in config.toml.

Here’s the original code:

   <style type="text/css">
   {{if .Site.Params.footerCover}}
    footer.page-footer{background-image: url({{.Site.BaseURL}}/{{.Site.Params.footerCover}});}
   {{else}}
    footer.page-footer{background-image: url({{.Site.BaseURL}}/images/default.png);}
   {{end}}
   </style>

Is there something i can replace {{.Site.BaseURL}} with that will print out the relative path to the content root?

2

Do this work for you?

url({{ .Site.Params.footerCover | relURL }});
3

That has the opposite problem, in that it forces the URL to always be relative, and doesn’t help when footerCover isn’t set.

It’s probably best to ignore the footerCover bit in regards to this, as it’s not really relevant to the problem.

What i want is

footer.page-footer{background-image: url(http://example.org/images/default.png);}

when canonifyurls = true and relativeurls = false,

to be

footer.page-footer{background-image: url(/images/default.png);}

when canonifyurls = false and relativeurls = false,

and to be

footer.page-footer{background-image: url(./images/default.png);}

when canonifyurls = false and relativeurls = true.

This is the way Hugo works for HTML links so it must know how to generate the URLs/paths internally, i’m just wondering if there’s something as simple as .Site.BaseURL that exposes it to the user so it can be used in non-HTML use cases.