Post types, tumblr style

I’d like to create a blog / posts section of my hugo site that has more of a tumblr style feed. Different content types for different kinds of posts all in one stream. I’m not really sure if that’s wise from an SEO standpoint but I dont’ want the have the same displayed format for an article as a simple link post.

Photograph, Link(s), Video, Quote, Article would cover the bases of content.

But I’m a little baffled how to best accomplish it from a template perspective in hugo. Returning different post styles/formatting on the list page specifically.

Based on what I’ve managed to figure out from the docs, the most straightforward solution is to have content types, like content/posts/articles and content/posts/photos and content/posts/links which would allow me to set different archetypes for each post type.

Any tips or ideas are appreciated. Thanks.

1) The URL structure of your site does not have to mirror the structure of your content/ directory. You can override the URL structure in the permalinks section of config.toml. I mention this because it sounds as if you want everything to appear under posts/, but it would be advantageous to organize your content/ directory differently.

2) Organize your content like this:

content
├── article
│   ├── article-1.md
│   └── article-2.md
├── link
│   ├── link-1.md
│   └── link-2.md
├── photo
│   ├── photo-1.md
│   └── photo-2.md
├── quote
│   ├── quote-1.md
│   └── quote-2.md
└── video
    ├── video-1.md
    └── video-2.md

This has several benefits:

  1. Hugo will infer content type from the first level directory under content/. You will not have to set type in front matter.

  2. You can easily create archetypes:

     archetypes/
     ├── article.md
     ├── default.md
     ├── link.md
     ├── photo.md
     ├── quote.md
     └── video.md
    
  3. It will be easy to override single and list templates:

    layouts/
    ├── article
    │   ├── list.html
    │   └── single.html
    └── _default
        ├── baseof.html
        ├── list.html
        └── single.htm
    

3) If I understand correctly, when listing a mix of content types on a single list page, you want to format each item’s display based on its type.

layouts/_default/list.html:

{{ define "main" }}
  {{ .Content }}
  {{ range .Site.RegularPages }}
    {{ partial (printf "list-page-item/%s.html" .Type) . }}
  {{ end }}
{{ end }}

Then create a directory structure for the partials:

layouts/
└── partials
    └── list-page-item
        ├── article.html
        ├── link.html
        ├── photo.html
        ├── quote.html
        └── video.html

For example, the partial for an article might look like this:

<div class="list-page-item list-page-item-article">
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <p>{{ .Summary }}</p>
  {{- if .Truncated }}
    <p><a href="{{ .RelPermalink }}">Continue reading...</a></p>
  {{- end }}
</div>

while the partial for a quote might look like this:

<div class="list-page-item list-page-item-quote">
  {{ .Content }}
</div>
5 Likes

That’s quite helpful, and close to what I had in my head. I’ll tinker a little more tonight with what you posted and see where I land.

Thanks so much.

Want to hear something embarrassing?

I’m just now getting around to working on this.

1 Like