Confused by how to range page bundles

support
1

Read the docs, searched on here = still confused about page bundles.

Can someone help a noob like me with a few code examples?

If I have this in my content folder. How would I get a list of all my-post titles and any images connected with the posts? Do I need to put something special in my-post/_index.md?

post
    my-post
        _index.md
        my-post.png
    my-post-2.md
    my-post-3.md
    _index.md

Looking for this output in layout/posts/list.html

Title: my-post
img: my-post.png
Title: my-post-2
Title: my-post-3

Looking for this output in layout/posts/single.html

Title: my-post
img: my-post.png

How would this change if I include a leaf bundle that is not headless. How do I
now get a list of all my-post titles with images? Do I need to put something special in
my-post/_index.md or my-post-4/index.md?

post
    my-post
        _index.md
        my-post.png
    my-post-2.md
    my-post-3.md
    my-post-4
        index.md
        my-post-4.jpg
    _index.md

Looking for this output in layout/posts/list.html

Title: my-post
img: my-post.png
Title: my-post-2
Title: my-post-3
Title: my-post-4
img: my-post-4.jpg

Looking for this output in layout/posts/.single.html

Title: my-post-4
img: my-post-4.png

2

Here are some hints:

Let’s say we have content that looks like:

├───post
│   ├───post-1
│   │       img-1.jpg
│   │       index.md
│   │
│   ├───post-2
│   │       img-1.jpg
│   │       img-2.jpg
│   │       index.md
│   │
│   └───post-3
│           img-1.jpg
│           img-2.jpg
│           img-3.jpg
│           index.md

Then this template code:

{{- range where .Pages "Section" "post" }}
  {{ .Title }}
  {{- with .Resources.ByType "image" }}
    {{- range . }}
      {{ .Title }}
    {{- end }}
  {{- end }}
{{- end }}

Would give this output:

Post 3
    img-1.jpg
    img-2.jpg
    img-3.jpg
Post 2
    img-1.jpg
    img-2.jpg
Post 1
    img-1.jpg
3 Likes
3

This “hint” would make a great addition to your very helpful Make a Hugo blog from scratch writeup. :wink:

4

Thanks – I tried to keep that write-up concise, so I didn’t bother with images in posts.

I think @regis’s article on page resources gives some nice examples

5

Chapter 2 building on chapter 1 possibly :slight_smile:

6

Thanks @zwbetz. Super helpful.

What happens when you mix a regular content folder with a branch or leaf bundle? So imagine you have lots of posts that have no images, and a select few that do. Creating folders for everything seems overkill so you might do this instead:

Example (leaf)

├───post
│   ├───post-1
│   │    img-1.jpg
│   │    index.md
│   │
│   ├───post-2.md
│   │
│   ├───post-3.md

or like so (branch):

├───post
│   ├───post-1
│   │     img-1.jpg
│   │     _index.md
│   │
│   ├───post-2.md
│   │
│   ├───post-3.md

How do you range through these examples? Or is mixing like this not good practice? Better to just stick images in /static/ or in /assets/? If so, how would you then call the images?

ps. reading your blog post seems very helpful

7

So this code in my example above

{{- with .Resources.ByType "image" }}

Will only “do stuff” with your images if they exist for a given page bundle. So it would allow you to mix non-bundles, branch bundles, and leaf bundles. Try it out and see.

P.S. Thanks :+1:

8

Thanks :facepunch:. I’ll play around with this and get back to you if I need more help. Hope that’s ok. :pray:

By the way, do you have a repo or example site you can recommend I can take a look at?

9

I’d recommend browsing the available themes, then when you spot one where you like the way they handle images, go to it’s git repo and explore the template code to see how they did it.