# Custom Layout for Certain Content Types?

**URL:** <https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193>\
**Category:** support\
**Created:** [April 25, 2016, 5:41pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193 "2016-04-25T17:41:32Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![newton](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@newton](https://discourse.gohugo.io/u/newton)\
**Post date:** [April 25, 2016, 5:41pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/1 "2016-04-25T17:41:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![moorereason](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/moorereason/32/592_2.png) [@moorereason](https://discourse.gohugo.io/u/moorereason)\
**Post date:** [April 25, 2016, 5:54pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/2 "2016-04-25T17:54:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![newton](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@newton](https://discourse.gohugo.io/u/newton)\
**Post date:** [April 25, 2016, 5:55pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/3 "2016-04-25T17:55:55Z")

</div>

Thanks for the help that worked!

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 11:38am UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/4 "2016-11-07T11:38:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [November 7, 2016, 3:36pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/5 "2016-11-07T15:36:07Z")

</div>

@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](https://gohugo.io/templates/list#example-section-template-post-html)

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 3:47pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/6 "2016-11-07T15:47:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [November 7, 2016, 4:14pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/7 "2016-11-07T16:14:19Z")

</div>

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:

```auto
{{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.

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 4:30pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/8 "2016-11-07T16:30:50Z")

</div>

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 }}`

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [November 7, 2016, 4:31pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/9 "2016-11-07T16:31:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 4:37pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/10 "2016-11-07T16:37:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [November 7, 2016, 4:40pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/11 "2016-11-07T16:40:34Z")

</div>

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.

> [@kiran-nani](#):
>
> 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

Nope. Please see my comment above that works…

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 4:45pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/12 "2016-11-07T16:45:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kiran-nani](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kiran-nani/32/2216_2.png) [@kiran-nani](https://discourse.gohugo.io/u/kiran-nani)\
**Post date:** [November 7, 2016, 4:53pm UTC](https://discourse.gohugo.io/t/custom-layout-for-certain-content-types/3193/13 "2016-11-07T16:53:34Z")

</div>

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.