[SOLVED] Media in separate folder and accessing with Page Resources

support
1

I would like to create a gallery with thumbnails in a blog post, making use of the recently introduced image processing techniques of Hugo. I am also using NetlifyCMS to create blogpost and upload images, but I am having some difficulties to get it correctly configured.

I have had a look many pages, but I can only link 2 here (no permission for more):

What I would like to do is to specify a selection of images in the frontmatter of the blogpost and save them in a general media folder. In the blogpost partial I would construct the gallery with thumnails, specifying the media folder as base and then using only the images of the frontmatter of each blog post. Is something like this possible?

My folder structure looks like this:

  • content
    • images
      • _index.md (contains ‘headless: true’)
      • fire-start.png
    • blog
      • 2018-04-29
        • _index.md

This code shows all images in the image folder:

{{ with .Site.GetPage "section" "images" }}
  <h2>{{ .Title }}</h2>
  {{ $resources := .Resources.Match "**"}}
  {{ range $resources }}
    {{ with . }}
      <img style="max-width: 100%;" src="{{ .RelPermalink }}">
      <br />
    {{ end }}
  {{ end }}
{{ end }}

But I would like to filter it for only the images from the frontmatter of the blogpost. Is that possible?

2 Likes
2

I would suggest you create a headless page bundle storing all your directories of images and then access it when needed using .GetPage

This way you get all the benefit of page resources without having to create a « visible « page for it. And it can sit at the root of your content directory for easy access from editors.

3

Thanks for your reply @regis. Is this not more or less what I have done in the example I gave? I struggle now to use .Resource.Match to get only the images from the frontmatter:

gallery:
  - image: /images/picture1.png
  - image: /images/picture2.png

The only way I see an image is to use the double wildcard (**)

4

That’s a branch bundle (_index). Only leaf bundles (index) can be headless.

5

Changed the _index.md to index.md and all images render.

But normally I would use a range to loop over the images in the front matter with {{ range .Params.gallery}}

is it possible to combine this with the

  {{ $resources := .Resources.Match "**"}}
  {{ range $resources }}

So that the Match select only things from the .Params.gallery range?

6

Sorry about earlier, I misread your question.

Now .GetMatch does not allow multiple exclusion (not that I am aware of), but where allows you to filter your range very thoroughly though

The following is not tested, but this is where you want to go I think. I stored resources in a var for readability:

{{ $resources := (.Resources.Match "**") }}
{{ range where  $resources ".Name" "in" .Params.gallery }}
{{/* do your code /*}}
{{ end }}

Go check the doc on where used with "in"

3 Likes
7

Got it working. I also had to trim the prefix from the file name. I store this array on Scratch. Now it looks like:

{{ $page := . }}
{{ with .Site.GetPage "page" "images" }}
  {{ $resources := .Resources.Match "**" }}

  {{ range $page.Params.gallery }}
    {{ with . }}
      {{ $.Scratch.Add "gallery" (slice (strings.TrimPrefix "/images/" .image)) }}
    {{ end }}
  {{ end }}

  {{ range where $resources ".Name" "in" ($.Scratch.Get "gallery") }}
    {{ $image200x := (.Resize "200x") }}
    {{ $image400x := (.Resize "400x") }}
    <img src="{{ $image200x.RelPermalink }}">
    <img src="{{ $image400x.RelPermalink }}">
    <br />
  {{ end }}
{{ end }}

Comments for better code are welcome.
Thanks for all support!

4 Likes