Loop through subdirectories

support
1

Hi, I want to create a website that is organized like so:

  • Hero section
  • Subsection
    • Subsection
      • Image
      • Image
    • Subsection
      • Image
      • Image
      • Image
  • Subsection
    • Subsection
      • Image
      • Image
    • Subsection
      • Image
      • Image
      • Image
  • Subsection
    • Subsection
      • Image
      • Image
    • Subsection
      • Image
      • Image
      • Image
        The way the images are organised needs to be easily modifiable, the way way came to mind to achieve this is by representing every section as a directory, and every image as a webp.

So far I have the following code:

{{ range readDir "assets" }}
   	<section>
   		<h2>{{ .Name }}</h2>
   		<div>
   	  	        {{ range HELP: need to read the subdirectory of the subdir of assets }}
                                <div>
                                         Here I will loop over each image within the subdir of the subdir of assets, and display it.
                                <div>
                        {{ end }}
   		</div>
   	</section>
	{{ end }}

Can sm1 help me achieve this?

2

Is this the site structure, or the layout of a single page?

3

This is the layout of a single page

4

It is the home page, or some other page? It makes a difference.

5

It’s the home page (layouts/index.html)

6

First, there is rarely a good reason to use readDir.

Second, you will need to leverage:

  1. Build options, specifically headless sections
  2. Page resources and associated methods
  3. The ability to walk a directory using a recursive partial template
content structure 
content/
├── home/
│   ├── hero/
│   │   └── _index.md
│   ├── section-1/
│   │   ├── section-1-1/
│   │   │   ├── _index.md
│   │   │   ├── a.jpg
│   │   │   └── b.jpg
│   │   ├── section-1-2/
│   │   │   ├── _index.md
│   │   │   └── c.jpg
│   │   └── _index.md
│   ├── section-2/
│   │   ├── section-2-1/
│   │   │   ├── _index.md
│   │   │   ├── d.jpg
│   │   │   └── e.jpg
│   │   ├── section-2-2/
│   │   │   ├── _index.md
│   │   │   └── f.jpg
│   │   └── _index.md
│   └── _index.md
└── _index.md
layouts/_default/home.html (assumes you are using base/block model) 
{{ define "main" }}
  {{ .Content }}
  {{ with site.GetPage "/home" }}
    {{ partial "inline/walk-home-sections.html" .Sections }}
  {{ end }}
{{ end }}

{{ define "partials/inline/walk-home-sections.html" }}
  {{ range .ByWeight }}
    <h2>{{ .Title }}</h2>
    {{ .Content }}
    {{ range .Resources.ByType "image" }}
      {{ with .Process "resize 200x" }}
        <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
      {{ end }}
    {{ end }}
    {{ with .Sections }}
      {{ partial "inline/walk-home-sections.html" . }}
    {{ end }}
  {{ end }}
{{ end }}

Example:

git clone --single-branch -b hugo-forum-topic-47521 https://github.com/jmooring/hugo-testing hugo-forum-topic-47521
cd hugo-forum-topic-47521
hugo server
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.