Page-title error on build

support
1

Good Day.

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.

So, here’s how I’m attacking it:

{{ if ne (len .Path) 0}}
  {{ $tep := path.Dir .Path }}
  {{ $header_param := where .Site.Params.Backgrounds "name" $tep }}
  {{ $header_img := index (index $header_param 0) "bgImage" }}
  {{/*  $header_img = "/posts/blog-header.png" */}}
{{ else }}   
  {{ $headerImg = "/posts/blog-header.png" }}
{{ end }}
<section class="page-header" style="background-image: url('{{ $headerImg }}'); background-position: center;">

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).

A). What’s happening, and,
B). What can I do?

Thanks.

2

I take it you have your params section in your config like:

params:
  Backgrounds:
  - name: sectionname
    bgImage: background_image.png

Therefore, you only need one index:

{{$header_img := (index $header_param 0).bgImage}}

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:

3

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"
4

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.

/content
 |_ posts/
 |     |_ _index.md
 |         blog-header.jpg
 |         post1/
 |           |_ index.md
 |              post-img.jpg
 |         post2/
 |           |_ index.md
 |              diff-img.jpg
 |_ contact/
 |    |_ _index.md
 |       contact-bg.jpg

and in each section’s _index.md's front matter:

bgImage: "blog-header.jpg"

Now, in the partial page-title.html get rid of all that custom code I wrote and replace with (basically, this example doesn’t contain any fall-backs)

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

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 }}">