Getting Page Resources (Images) such that they can be Resized

support
1

I’ve got the following content layout
content/
├── team
│ ├── rider1.md
│ ├── rider2.md
│ ├── rider1profile.jpg
│ ├── rider2profile.jpg
│ ├── rider1action.jpg
│ └── _index.md

I’ve got my list.html template defined in /layouts/_default

I’m trying to access the images from that template and I’d like to retrieve them as resources such that they can be resized and the like.

If I put an array of the images in each team rider’s frontmatter, I can cycle through them as strings, but there’s no way to do the image manipulation. It’s also unclear if I need to actually declare these resources, or if they are tied to my list by nature of _index.md being in the ‘team’ Section’s folder. Again, these are images which I would like to keep with thin the content hierarchy, not just in /static or /assets or /resources at the top level.

Shouldn’t I be able to do something like this?

    <section class="flex-ns flex-wrap justify-around mt5">
      All Riders
      {{ range .Pages }}
        <div >
   
            {{/*  <a href="{{.Permalink}}">{{.Name}}</a>  */}}
            {{ .Params.name }}
            
            {{ range .Params.resources}}
              {{ $image := .Resource.Get .}}
              {{ $myimage := $image.Resize "100x" }}
              <img src="{{ .src }}"/>
            {{ end }}

        </div>
      {{ end }}
    </section>
2

content/team/rider1.md

+++
title = "Rider1"
date = 2021-03-28T19:42:07-07:00
draft = false
name = "Jane Smith"
[[resources]]
src = "rider1profile.jpg"
alt = "Alt text for rider1profile"
[[resources]]
src = "rider1action.jpg"
alt = "Alt text for rider1action"
+++
This is content/team/rider1.md

layouts/team/list.html

<section class="flex-ns flex-wrap justify-around mt5">
  <h2>All Riders</h2>
  {{ range .Pages.ByParam "name" }}
    <div >
      <h3>{{ .Params.name }}</h3>
      {{ range .Params.resources }}
        {{ $img := $.Resources.GetMatch .src }}
        {{ $img = $img.Resize "100x" }}
        <img alt="{{ .alt }}" src="{{ $img.RelPermalink }}">
      {{ end }}
    </div>
  {{ end }}
</section>
3

Thank you for your thoughtful response.

For some reason, it’s only working when I use the Parent …maybe I should stuff each rider in its own directory and see if that’s more natural. -

All Riders {{ range .Pages }}
{{.Params.Name}} 
  {{ with .Parent.Resources.ByType "image" }}
    {{ range . }}
     <img src={{ (.Resize "x200").RelPermalink }} />
    {{ end }}
  {{ end }}

</div>
{{ end }}
4

My previous response shows how to code your list page with the content structure that you defined.

However, I would structure the content differently.

content
└── team
    ├── rider1
    │   ├── index.md
    │   ├── rider1action.jpg
    │   └── rider1profile.jpg
    ├── rider2
    │   ├── index.md
    │   ├── rider2action.jpg
    │   └── rider2profile.jpg
    └── _index.md

content/team/rider1/index.md

+++
title = "Rider1"
date = 2021-03-28T20:11:31-07:00
draft = false
name = "Jane Doe"
+++
This is content/team/rider1/index.md

layouts/team/list.html

<section class="flex-ns flex-wrap justify-around mt5">
  <h2>All Riders</h2>
  {{ range .Pages.ByParam "name" }}
    <div >
      <h3>{{ .Params.name }}</h3>
      {{ range .Resources.ByType "image" }}
        {{ $img := .Resize "100x" }}
        <img src="{{ $img.RelPermalink }}"/>
      {{ end }}
    </div>
  {{ end }}
</section>

Benefits of this approach:

  1. The relationship between the page (the markdown file) and its images is defined by directory structure, not by front matter. This makes creation of the markdown file faster and less prone to error.
  2. Each page (e.g., rider1, rider2) is now a page bundle, and the related images are available as page resources for scaling, filtering, etc.
5

Perfect. Thank you. I agree with your approach.

6

And to clarify, the resources are not considered Page Resources until they’re listed in the frontmatter of the page? There’s no way to implicitly reference all of the images within the /team/rider1 folder just ByType - they HAVE to be declared ‘resources’ within the YAML of the .md?

7

False.

For a leaf bundle, a file (image, audio, video, data, document, text file, etc.) is a Page Resource if it is adjacent to, or in a subdirectory below, a index.md file.

For a branch bundle, a file is a Page Resource if it is adjacent to a _index.md file.

For a comparison of leaf vs. branch bundles see https://gohugo.io/content-management/page-bundles/.

1 Like