Display differently styled thumbnails based on content type

I’m currently trying to display two different content types (with different styling) on one list page. I want a grid of thumbnails–some for art posts, some for writing posts. I referenced this post to try and come up with a solution but have not successfully implemented it.

  1. My content is generally organized like this:
└── issues 
   ├── issue-1
      ├── art
         ├── art-1.md
         ├── art-2.md
         └── _index.md
      └──  writing
         ├── writing-1.md
         ├── writing-2.md
         └── _index.md
   ├── issue-2...
      ├── art...
      ├──  writing...
      └── _index.md
   └── _index.md
└── _index.md
  1. And I created these archetypes:
├── art.md
├── writing.md
  1. I created the following layouts:
├── art
   └── single.html
├── issue-page
   └── list.html (supposed to show the thumbnails)
├──  issues
   └── list.html
├── writing
   └── single.html
  1. I also created 2 partials:
└── partials
    └── issue-page
        ├── art.html
        └── writing.html

Partial for art thumbnails:
<a href="{{.Permalink}}"><img class="img-fluid" src="{{ .Param featuredImage }}" alt="featured image"></a>

Partial for writing thumbnails:
<div class="card-body"> <h3 class="card-title"> <a href="{{.Permalink}}"> {{ .Title | truncate 20 }} </a></h3></div>

  1. Based on the post I was using for guidance, I tried to use this in the issue page list template:
{{ range .Pages }}
    {{ partial (printf "issue-page/%s.html" .Type) . }}
  {{ end }}

This didn’t throw an error, but it also didn’t work for me. I realized this is (probably?) because it’s still using the Issues layout despite my setting the front matter to a different layout. (Ex: Issue 01’s front matter is set to layout: issue-page, but it uses the ‘Issues’ layout instead.)

I tried inserting the snippet into the Issues list page as well, but this threw an error:
executing "main" at <partial (printf "issue-page/%s.html" .Type) .>: error calling partial: partial "issue-page/issues.html" not found

I’m unsure of why it’s referring to that file (issues.html). I can call the individual partials, however.

Note: The art and writing single pages are rendering correctly.

My specific problems are (1) the page listing mixed content types is not loading the correct layout and (2) I’m not sure how to display those mixed content types.

Repository is here.


Throws 404

Apologies, should be fixed now.

Template location

When you set layout to issue-page in the front matter of your issues, Hugo looks for the template in this order:

  • layouts/issues/issue-page.html
  • layouts/_default/issue-page.html

But you’ve placed your template here:


Calling the partials

Currently, you are inconsistently setting type in the front matter of the pages under the various art directories. Some have type: art while others do not.

If you consistently set type, this is fine.

{{ partial (printf "issue-page/%s.html" .Type) . }}
1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.