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 LutheranAnswers.com/podcast/season-1/ 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.

Layouts/Podcast/List.html:

{{ 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>
  <div class="text-lg font-light text-gray-400 font-bold md:w-1/2">
    {{ .Content }}
  </div>
</div>
<section class="w-full flex flex-col md:flex-row flex-wrap justify-start">
  {{ range .Pages }}
    {{ .Render "summary" }}
  {{ end }}
</section>

{{ 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 _index.md 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 _index.md 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/_index.md
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/_index.md:1: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