Filter .Resources output

support
1

There might be an obvious way to do this, but I’m trying to get all of the .Resources in a leaf bundle but it’s a mixture of images and markdown files with video embeds. I know the syntax below is slightly off, but is there an easy way to do something similar to:

{{ $images := .Resources.ByType "image" }}
{{ range .Resources }}
    {{ if eq $images }}
        <div class="img-container" >
          <img src="{{ .Permalink }}" style="width:100%; height:auto;">
        </div>
    {{ else }}
      <p>{{ .Content }}</p>
    {{ end }}
{{ end }}

my bundles are generally organized like this:

├── antiqueboatmuseum
│   ├── images
│   │   ├── 01_abm.jpg
│   │   ├── 02_abm.jpg
│   │   ├── 03_abm.jpg
│   │   ├── 04_abm.jpg
│   │   ├── 05_abm.jpg
│   │   ├── 06_abm.jpg
│   │   ├── 07_abm.jpg
│   │   ├── 08_abm.jpg
│   │   ├── 09_abm.jpg
│   │   ├── 10_abm.jpg
│   │   ├── 11_abm.jpg
│   │   ├── 12_abm.jpg
│   │   ├── 13_abm.jpg
│   │   ├── 14_abm.jpg
│   │   ├── 15_abm.jpg
│   │   ├── 16_abm.jpg
│   │   ├── 17_abm.jpg
│   │   ├── 18_abm.jpg
│   │   ├── 19_abm.jpg
│   │   └── 20_abm.jpg
│   ├── index.md
│   └── videos.md

The goal is for us to be able to quickly add images to a folder in order to update our website, but occasionally add a video link and drop it in that folder as well. Ideally everything within a project folder would be flattened, and the single.html page function above would loop through all assets, and could output/render each resource type differently.

2

Your example looks exactly correct. There are also other matching methods on Resources you can use. Look in the docs.

3

Maybe this option will work?

{{ if .Resources }}
  {{ $images := .Resources.ByType "image" }}
  {{ range .Resources }}
        <div class="img-container" >
          <img src="{{ .Permalink }}" style="width:100%; height:auto;">
        </div>
  {{ end }}
{{ end }}
<p>{{ .Content }}</p>
4

Interesting, it does seem like it should work, but I get this error when building:

$ hugo
Building sites … 
ERROR 2018/06/21 08:16:55 \
Error while rendering "page" in "projects/centerforhumanities/": template: /Code/pnp-web/layouts/_default/single.html:52:10: \
executing "main" at <eq>: wrong number of args for eq: want 2 got 1
5

This does grab all of the Resources that are images, but the {{ .Content }} block as it’s written is outside of the loop, therefore returns the content from index.md instead of videos.md

6

Yes, you need to remove that “if images”

7

Okay, but I want to output different markup if the resource is an image versus another type. For instance in this tree:

├── antiqueboatmuseum
│   ├── images
│   │   ├── 01_abm.jpg
│   │   ├── 02_abm.jpg
│   │   ├── 03_abm.jpg
│   │   ├── 04_abm.jpg
│   │   ├── 05_abm.jpg
│   │   ├── 06_abm.jpg
│   │   ├── 07_abm.jpg
│   │   ├── 08_abm.jpg
│   │   ├── 09_abm.jpg
│   │   ├── 10_abm.jpg
│   │   ├── 11_abm.jpg
│   │   ├── 12_abm.jpg
│   │   ├── 13_abm.jpg
│   │   ├── 14_abm.jpg
│   │   ├── 15_abm.jpg
│   │   ├── 16_abm.jpg
│   │   ├── 17_abm.jpg
│   │   ├── 18_abm.jpg
│   │   ├── 19_abm.jpg
│   │   └── 20_abm.jpg
│   ├── index.md
│   └── videos.md

videos.md will have the following code:

---
title: ABMVideo
---
{{< vimeo id="146022717" class="my-vimeo-wrapper-class" >}}

and the idea is to have a list of files (videos, pdfs, images) and pull them in all at once. Possible?

8

You should test .ResourceType property of your resource object and find what you want in there. If the main type is not enough, you’ll have to test .RelPermalink for now.
You can use strings.Contains for that. I explain the trick here.

Note that there may be a better approach since I experimented with Page Resrouces, but this one will work.

9

Thanks regis! That worked. Now I’m wondering about making another tweak. Does .Resources prioritize / pull in .jpg file types first and .md pages second? I tried renaming the files to:

01-abm.jpg
02-abm-video.md
...
etc

but the videos/markdown resources still get pulled in last. Is that how it will always work? Any way to adjust that? (I think I could probably add a parameter for the order, but I’d prefer it to be ordered alphanumerically by filename.

Below is what I ended up with on single.html and you can see the site in development here.

  {{ range .Resources }}
    {{ if (strings.Contains .RelPermalink ".jpg") }}
        <div class="img-container" >
          <img src="{{ .Permalink }}" style="width:100%; height:auto;">
        </div>
    {{ else if (strings.Contains .RelPermalink ".pdf") }}
        <p>PDF Download: {{ .RelPermalink}}</p>
    {{ else }}
        {{ .Content }}
    {{ end }}
  {{ end }}
10

Once you have pulled your resources, you can use range and sort just like with any other list.

Now because they are resources you will have to use Page Resources Metadata to assign them an order parameter.