Background image for header on taxonomy result pages

support
1

My header-bg.ipg is here: static> images> backgrounds> header-bg.jpg

In mytheme> partials> page-title.html I have this code

<section class="page-header" style="background-image: url('{{ .Params.BgImage | relURL}}');">
  ...
</section>

When Hugo produces the html pages I get the expected result <section class="page-header" style="background-image: url('/images/backgrounds/header-bg.jpg');">
on all my pages (including the search results)

except the results on taxonomy pages (category) where I can see only<section class="page-header" style="background-image: url('/');">

Where should I tell Hugo that I want to see the same header-bg.jpg on all Category pages?

2

Is the context (the dot) the page? If yes, that points to a page’s front matter.

Or is there a site params value to fall back to?

3

I think the dot is the page. I have the taxonomy description in config.toml

[taxonomies]
category = "categories"
format = "formats"

...
# category menu
[[menu.category]]
name = "Alcott"
URL = "categories/alcott/"
weight = 10

[[menu.category]]
name = "Tarkington"
URL = "categories/tarkington/"
weight = 20
...

Should I add here some user-defined fields?

4

OK, then unless you’ve set the param in front matter, this:

{{ .Params.BgImage | relURL }}

Will return / (or /something if you’re serving your site from a subdirectory).

5

A more common setup would be something like this…

site config

[params]
bgImage = '/images/backgrounds/a.jpg' # required

front matter

[params]
bgImage = '/images/backgrounds/b.jpg' # optional

template

<section class="page-header" style="background-image: url('{{ .Param "bgImage" | relURL}}');">

The template will look for a page param first, then fall back to the site param.

1 Like
6

Oh, thank you!

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.