Custom Layout for Certain Content Types?

support
1

Hey all, loving Hugo but I have run into an issue.

I have a games content type that will be used to display information about my games. Some use the default single.html template in the layouts/games folder. But I would like some to use a custom layout for that specific game. For example “dragon riders 2” will use default layout but “kings battalion” should use a special template.

How do I go about doing this? Thank you!

2

In the content front matter, set type to whatever you want. Then create a layouts/whatever/single.html template.

3 Likes
3

Thanks for the help that worked!

4

This is ok for single view pages. But I have two type of posts one is workshops and another is blogs,both have single and list pages i.e.,single.html,list.html,li.html. I am able to use _default folder for this purpose only. So that I can create either blog or workshops. I am not able to use li.html in another folder. Can anyone suggest me the best solution?

5

@kiran-nani If you want a list view for the /posts section, just create a layout at layouts/section/posts.html. You can do this for each respective section. So, if you want a list view for all the .md files under content/workshops, you can create this view under layouts/section/workshops.html. Hugo only goes to the layouts you’ve created in _default/ if it doesn’t find the layouts elsewhere first. Check the docs regarding content lists:

https://gohugo.io/templates/list#example-section-template-post-html

6

But I want to create list.html,li.html and single.html in one folder and i wanna use li.html to render previews for my workshop page like
{{ range .Data.Pages }}
{{ .Render “li” }}
{{ end }}
the above function only works in _default folder and not working in custom folders like workshops.

7

Just spun up a quick site and I think you can get almost all the way there with what you want.

Using workshops as an example, you can put the main list view in section/workshops.html. If you want to reference the li.html specific to workshops, create a file in workshops/li.html.

Then, for example, in section/workshops.html, you can do something like the following:

{{define "main"}}
{{ range .Data.Pages }}
{{ .Render "li" }}
{{ end }}
{{end}}

The li.html template that will be rendered here will first look for workshops/li.html and then look to _default/li.html second. As far as keeping the list.html, li.html, and single.html all within the one folder, it seems like you’re talking about a preference for source organization. I seem to recall that Hugo used to work this way in terms of where it looked for layouts, but I’m going to defer to @digitalcraftsman on this one.

HTH.

8

Glad to see your reply but I have already used _default/li.html for my blog and I have li.html in workshops folder but when I used
{{ range .Data.Pages }} {{ .Render "li" }} {{ end }}
I am taking to an empty page. I think there must be some more code inside the function {{range}} to call other pages,see the below one
{{ range .Data.Pages }} {{ .Render "workshops/li" }} {{ end }}

9

Where is your list page for workshops set up? As I mentioned, the above example I gave I just tested locally and had no issues. This might be easier if you point me to a repository.

10

Sorry to say this, The project on which I am working is private repo and I can’t take you to that repo.
Pardon me.

11

Then I’ll need more of an idea about your source organization, or you can put it in a gist.

Regardless, the example I gave above works.

  1. Section list page at layouts/section/workshops.html
  2. li.html at layouts/workshops.li.html then {{.Render "li" }} in your range.

Nope. Please see my comment above that works…

1 Like
12

Hope you understand my issue,I have
_default with li,list,single and workshops with li,list,single
my content folder contains two sub-folders, one is posts which contains blogposts and another one is workshops which contains workshop posts. Now how to render workshop’s li.html in workshop’s list.html page.

13

Sorry,I didn’t see your previous reply when i posted the last comment,I will go with your idea i.e., having a layouts/section/workshops.html and having layouts/workshops/li.html. I will come back with my result by tomorrow.
Thank you for being connected with me regarding the issue.

1 Like