Relative path in Quire

[1000camels]

I'm having trouble understanding how the relative path for imageDir is working. Specifically, I am trying to use the Splash page on some internal (ie. subdirectory) pages. As a result, the background-url set in css on the hero image do not render, since they are using /img/.

I tried playing around with various settings, but I do not seem to be able to deploy to github and fix these urls

I've noticed that the bin/deploy.sh script does pass the github parameter, but even with my settings below, I am not seeing full urls:

# hugo --config=config.yml,config/environments/github.yml
quire site --env=github

# my config/environments/github.yml
baseURL: "https://digitalpub.umag.hku.hk/taikwun/" # Needs trailing slash
canonifyURLs: true
relativeURLs: false

Any help is appreciated

Darcy

[geealbers]

Hi @1000camels, yes unfortunately we've seen this before (with @hlj24 most recently) and I haven't been able to create and test a stable fix for it yet.

The primary issue is that Hugo's relURL and absURL functions, and their relativeURLs and canonifyURLs config settings are for some reason only applied in certain contextual situations. For instance, they have the desired effect when used on a URL in an <a> tag but not when used on a URL in a style attribute, as they are for the background images on splash pages.

Until Hugo makes a change or we can work out something stable in Quire, I think this should probably fix it for you.

In /themes/quire-starter-theme/layouts/splash/single.html on or around line 13, there should be this:

{{- $imgPath := printf "%s/%s" ($.Scratch.Get "imageDir") .Params.image -}}

Since you have a baseURL set in the github.yml config, if you update the code to this it will prepend the full URL and the background image should load:

{{- $imgPath := printf "%s%s/%s" .Site.baseURL ($.Scratch.Get "imageDir") .Params.image -}}

Let us know if that works! 🤞

[1000camels]

Thanks for the suggestion. Unfortunately, it is not working

Building sites … ERROR 2021/03/11 10:11:42 render of "page" failed: "/Users/darcy/Dev/UMAG/Quire Projects/taikwun/layouts/splash/single.html:13:40": execute of template failed: template: splash/single.html:13:40: executing "main" at <.Site.baseURL>: can't evaluate field baseURL in type page.Site
ERROR 2021/03/11 10:11:42 render of "page" failed: "/Users/darcy/Dev/UMAG/Quire Projects/taikwun/layouts/splash/single.html:13:40": execute of template failed: template: splash/single.html:13:40: executing "main" at <.Site.baseURL>: can't evaluate field baseURL in type page.Site
ERROR 2021/03/11 10:11:42 render of "page" failed: "/Users/darcy/Dev/UMAG/Quire Projects/taikwun/layouts/splash/single.html:13:40": execute of template failed: template: splash/single.html:13:40: executing "main" at <.Site.baseURL>: can't evaluate field baseURL in type page.Site
ERROR 2021/03/11 10:11:42 render of "page" failed: "/Users/darcy/Dev/UMAG/Quire Projects/taikwun/layouts/splash/single.html:13:40": execute of template failed: template: splash/single.html:13:40: executing "main" at <.Site.baseURL>: can't evaluate field baseURL in type page.Site

[geealbers]

Oops, capitalize the "B" in .Site.BaseURL (comes from https://gohugo.io/variables/site/#site-variables-list). That's my fault.

And then, when I just tested it now I found that in the line that follows, I had to change relURL in style="background-image: url('{{ $imgPath | relURL }}');" to absURL, which is opposite of what I was saying about Hugo's contextualizations before. Maybe it's changed or I didn't have it straight.

{{- $imgPath := printf "%s%s/%s" .Site.BaseURL ($.Scratch.Get "imageDir") .Params.image -}}
<section class="{{ if or (eq .Title "title page") (eq .Title "half title page") }} is-screen-only {{ end }} quire-page__header hero {{ if .Content }}{{ else }}quire-page__header--full-height{{ end }} {{ if .Params.image }}hero-image{{ end }}" style="background-image: url('{{ $imgPath | absURL }}');">

[1000camels]

That worked! Thanks!