Header image for list page of a section (all sections)

support
1

Sections are working great. I get a section list page that enumerates all posts via postcards in the section with summary blurb per post and feature image using the theme Casper3. So far, so good.

I would like to enhance this and have a header background image for all of the generated section list pages. A section is like this:

content/
   florida_coast/
       _index.md
       post1.md
       <more posts...>

_index.md for this section is:

+++
title = "Florida Coast"
feature_image = "/images/2020/06/7-mile-bridge.jpg"
+++

Pretty simple. The goal is for the feature_image (a variable used by casper3 for post header images and displayed by the single.html layout) to appear as the background of the header for the section list page.

I’ve looked at the single layout and how it generates the header. It tests {{ if .Param "feature_image" }} where the context is the current page. In a list page, the current context would be the section. I saw .CurrentSection as a variable.

How would I test if the section being processed by the loop has a feature_image?

{{ .Param .CurrentSection "feature image"}

Then I can display it. I might need a new class for that.

Are there examples of themes that provide for this capability. Casper3 doesn’t seem to for any taxonomy list pages.

Here is the repo on github with the link to the branch “sections” where I am setting this up and testing before merging with master: https://github.com/lewisl/a-view-hugo/tree/sections

Thanks

2

I’m not sure I understand your question.

When you are on a list page, the current context is still a .Page, so things like

{{ .Param "someparam" }}

still work.

3

I think this is surprisingly complicated.

I had to update casper3 as the last commit done was meant to include a header image. The theme uses feature_image in front matter rather than cover, or background, etc. No problem with that.

The partial for the header background does this to display the header image if present:

{{ if .Scratch.Get "background" }}
    <style type="text/css">
        .responsive-header-img {
            background-image: url('{{ .Scratch.Get "background" }}');
        }
    </style>
    <div class="outer site-header-background responsive-header-img">
{{ else }}
    <div class="outer site-header-background no-image">
{{ end }}

The index.html layout attempts to set the value of the image using Scratch. Note that the Scratch.Set happens prior to calling the header background prior.

<header class="site-home-header">
    {{ .Scratch.Set "background" .Params.feature_image }}
    {{- partial "header-background.html" . -}}

The fact is the Scratch never contains the item “background”.

I wonder if this is a scope problem. I am going to try .Page.Scratch. Not very confident it will work but I’ll report back.

Maybe there is just an easier way: not clear this use cases raises the tempate variable scoping challenges that lead to Scratch. This seems like a very obvious thing to want to do and other themes do it.

4

Well, no go.

I am pretty stuck. It’s a good theme that accomplishes a lot using very few layouts but the developer/maintainer is not active much any more.

It could also be that the style sheet is busted in some way.

Given that this is a common thing, is there an altogether different approach?