So, I’m working in a theme - adrian-hugo - and I want a custom header for different sections of the site - Shop, Blog, Contact, About. This feature isn’t a part of the theme.
You can see my commented out line (last in the if statement). Here’s why…
When I build Hugo with hugo serve I get an error, that goes away if I uncomment that line and comment the one above it (the nested index line).
ERROR 2020/01/19 13:37:06 render of "taxonomy" failed: execute of template failed:
template: _default/list.html:6:3: executing "main" at
<partial "page-title.html" .>: error calling partial: "/hugo/site.com/themes/adrian-hugo/layouts/partials/page-title.html:10:20":
execute of template failed: template: partials/page-title.html:10:20:
executing "partials/page-title.html" at <index (index $header_param 0) "bgImage">: error calling index: index of untyped nil
When I hard-code the $headerImg and comment out the nested index function, the site will build just fine. Now, while the site is being served hugo serve I can uncomment the nested index call, and comment out the hard-code, and the site will reload live with no errors and the correct header image will load based on the directory the page is in (/posts, /shop, /about, /contact).
Additionally, in your else tag you’re going to need to define the variable—not redefine—since it is never getting defined:
{{$headerImg := "/posts/blog-header.png"}}
My suggestion though would to look at Page Resources, since it would be better suited for this type of scenario and much more dynamic than using your site params:
Thanks for the reply.
I did initially declare the var $headerImg above the start of the if-statement
{{ $headerImg := "/posts/blog-header.png" }}
{{ if ne (len.Path) 0 }}
...
I guess I should’ve put in the params code (toml). So, you might be suggesting to put the value of the background image I want in the front matter of each post? Guess that’d be an easier route, but if the image needs to be changed, I’d half to do a larger search and replace (if for some reason I couldn’t just rename the new image to what’s essentially hard-coded. Am I interpreting your suggestion correctly?
# backgrounds
[[params.backgrounds]]
name = "categories"
bgImage = "/posts/blog-header.png"
[[params.backgrounds]]
name = "tags"
bgImage = "images/backgrounds/header-bg.jpg"
[[params.backgrounds]]
name = "shop"
bgImage = "images/backgrounds/header-bg.jpg"
[[params.backgrounds]]
name = "posts"
bgImage = "blog-header.png"
[[params.backgrounds]]
name = "about"
bgImage = "/images/backgrounds/header-bg.jpg"
[[params.backgrounds]]
name = "contact"
bgImage = "contact-header-bg.png"
Ok, so I guess I was going over-kill…
Since each section can have it’s own _index.md that contains front matter, I can just make sure that that file exists, and configure my bgImage there.
This works because the page vars are being passed down to this partial template. I never needed to go all the way back up to the config file. Thanks @b_rad for prompting me to look further.
I haven’t tried this yet for the page-header background-image, but it works well for my <meta desription tag which should work well for a fall-back:
<meta name="description" content="{{ if .IsPage }}{{ .Description }}{{ else }}{{ if .IsHome }}{{ .Description }}{{ else }}{{ if .IsSection }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}{{ end }}{{ end }}">