How to set up sections?

I can’t figure out sections.

I’m trying to list all of the episodes of my podcast on my website, but each time I try to do sections I can’t get anything to work right.

Right now this is what it looks like:

I have a directory structure like this:

Current working directory structure

Here’s the problem:

  • If you navigate to Podcasts | Lutheran Answers you see every podcast ever.
    Perfect. This is what I want.

  • If you navigate to you hit a 404 page.
    awful, I want this to just list the episodes in the season 1 directory

  • If I add index pages to season 1 or season 2, then my templating gets confused and tries to render those pages as if they were podcast episode pages.

Let me know what code you need to see specifically.


{{ define "main" }}

<div class="flex flex-col mb-12">
  <div class="flex flex-col md:flex-row items-center text-center md:items-baseline justify-between">
    <h1 class="text-6xl font-bold text-gray-800 mb-4">{{ .Title }}</h1>
    <h3 class="text-3xl font-serif italic text-gray-600">{{ .Params.subtitle }}</h3>
  <div class="text-lg font-light text-gray-400 font-bold md:w-1/2">
    {{ .Content }}
<section class="w-full flex flex-col md:flex-row flex-wrap justify-start">
  {{ range .Pages }}
    {{ .Render "summary" }}
  {{ end }}

{{ end }}

*Note: I’ve tried changing the range to .CurrentSection and it also throws an error.

A directory with content files is a “section” if and only if (a) it is a top-level directory under content, or (b) if it contains an file.

1 Like

The directory satisfies both of those things.

I guess my problem is I can’t make pages for the sub-sections, because they get roped in as regular content. I’m not sure how to fix that.

If you want season 1 to render as a section, then you need to make it a section.

Yes, by adding a file

Except when I do that, that file gets rendered up a level as a ‘post’ within the larger podcast section, and I’m not sure how to stop that from happening.

Then I suspect your page collection(s) needs to be modified.

At this point, without looking at your project, I’m just guessing.

Here’s the repo: GitHub - remysheppard/lutheran-answers

any help would be greatly appreciated.

hugo new content content/podcast/season-1/
hugo server

Error: error building site: render: failed to render pages: render of “section” failed: “/home/jmooring/temp/lutheran-answers/layouts/podcast/list.html:14:7”: execute of template failed: template: podcast/list.html:14:7: executing “main” at <.Render>: error calling Render: “/home/jmooring/temp/lutheran-answers/content/podcast/season-1/”: failed to execute template podcast/summary.html: “/home/jmooring/temp/lutheran-answers/layouts/podcast/summary.html:3:18”: execute of template failed: template: podcast/summary.html:3:18: executing “podcast/summary.html” at <$image.Fill>: nil pointer evaluating resource.Resource.Fill

layouts/podcast/list.html (which is trying to render your section 1 list page) is calling layouts/podcast/summary.html which has this at the top:

{{ $image := printf "images/**/%s" .Params.feature }}
{{ $image = resources.GetMatch $image }}
{{ $image = $image.Fill "400x225 webp q70" }}

You’re assuming an image is available, which it is not. You need to code defensively.

1 Like