Content Distribution inside a Hugo template - how to populate different sections with content on a single page?

support
1

Hello.

I’m very new to Hugo.

I’m trying to create a series of uniform product pages. I have worked through the Giraffe Academy tutorial and I have also read through the docs regarding page bundles, resources etc.

I have started with my own ‘blank’ theme, and have set it up with Bootstrap (since this is a quick and easy layout framework I’m familiar with.) I also have header and footer partials which are working perfectly.

Here is what I need:

I need to output some content on the left, and a contact form on the right. This is fine, I have no problem achieving this in the layout with some Bootstrap markup and the {{.Content }} variable. On the left I also easily achieve the form markup using a partial template inserted into my Bootstrap html.

The problem:

Below this section, I need to get rid of these two columns and create a single row with more text. I understand exactly how this is done with raw html, but with Hugo I am not sure how to structure the content and which functions to call so that I can output more content in a container that is separate from the above two columns. In other words: I am well able to structure the html in my template so that I know where the content should appear, but how do I structure my actual content pieces and which variables/functions/features do I employ to output them?

I’m thinking that a list template will somehow be the best for this, but still not sure how to structure the different content elements and how to input them into the template.

I’m attaching an image to illustrate my problem. There will have to be several pages with different content that are output in this same way.

hugo-content-distribution-in-template
hugo-content-distribution-in-template.jpg900×2000 111 KB

2

Page Bundles is the way to do this.

For example in your single page template you could have something like this:

 {{ .Content }}         
 {{ with .Resources.ByType "page" }}
 {{ range . }}            
 <--- Markup for text from another md file --->
 {{ end }}
 {{ end }}
 {{ with .Resources.ByType "image" }}
 {{ range . }} 
<--- More images --->
{{ end }}
{{ end }}

You can also specify different markdown files under a Page Bundle to render them with different markup wherever you need with .Resources.Match.

See

2 Likes
3

You can take a look if you can use something from this project.

It uses concept of content elements which are creating content of page. One of content element is grid which can also have other content elements inside. Manual management of such structure is not so nice but gives lot more possibilities to take control of the content.