Image Processing in a Range

support
1

Hello there,
I am trying to process (resize, target webp and change quality) on a range of images.

Those images are stored in a page bundle. And listed in a frontmatter cascade.

Closest i have now with is this :

{{ with .Resources.ByType "image" }}
      {{ range . }}
          {{ $img := (.Resize "500x webp q75") }}
          <img src="{{ $img.RelPermalink }}"/>
      {{ end }}
{{ end }}

But this ↑ takes all the images in the “/images” folder of the bundle

I want to process and display only those under the gallery param in my front matter. Any idea how to solve this ?

Thanks a lot for reading me !

image
image594×699 17.1 KB

2

There are GetMatch/Match functions that matches the name frontmatter of your resources. GetMatch gets the first one that matches, Match gets them all. Give them a name that starts with “gallery” and match on “gallery*”.

A related post:

The documentation of GetMatch/Match:

3

Thanks I’ll look into it !

4

Ok I see, the resources.Match/GetMatch are pretty cool and pretty close do it, but it cannot work in my case.

This is because I have users that upload images from Netlify CMS, so I don’t have control over filenames. I’ll continue to look for something that can do it, in the meantime if anyone has an idea do not hesitate to chime in

Cheers.

5

Within a template (e.g., single.html)

{{ range .Params.gallery }}
  {{ with $.Resources.GetMatch . }}
    {{ with .Resize "500x webp q75" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}

Within a shortcode:

{{ range .Page.Params.gallery }}
  {{ with $.Page.Resources.GetMatch . }}
    {{ with .Resize "500x webp q75" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}
1 Like
6

Ooooooh yes that’s it ! Thanks a lot !
Completely overlooked that $ variable, I’ll look into it, seems important aha

1 Like
7

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