# Image Processing in a Range

**URL:** <https://discourse.gohugo.io/t/image-processing-in-a-range/37968>\
**Category:** support\
**Tags:** assets\
**Created:** [March 31, 2022, 2:49pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968 "2022-03-31T14:49:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![HugoCharly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugocharly/32/16638_2.png) [@HugoCharly](https://discourse.gohugo.io/u/HugoCharly)\
**Post date:** [March 31, 2022, 2:49pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/1 "2022-03-31T14:49:13Z")

</div>

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 :

```auto
{{ 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](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/4/9/4965db61d072e90785c26890928c1b967085b372.png)

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [March 31, 2022, 3:15pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/2 "2022-03-31T15:15:57Z")

</div>

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:

> [@Accessing page resources by name?](https://discourse.gohugo.io/t/accessing-page-resources-by-name/15228/3):
>
> Ooooh yes because the . is the range context. I totally missed that. I need to put in some time to learn Go properly. For anyone who has a similar problem here’s my complete working solution: {{ with .Site.GetPage "accreditations/index.md" }} {{ $resources := .Resources }} \<div class="uk-section"\> \<h2\>{{ .Title }}\</h2\> {{ with .Content }} \<p class="summary"\>{{- . -}}\</p\> {{ end }} \<ul class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid\> {{ range .Params.accredit…

The documentation of GetMatch/Match:

> **[Page resources](https://gohugo.io/content-management/page-resources/#methods)**
>
> Page resources -- images, other pages, documents, etc. -- have page-relative URLs and their own metadata.

---

<div class="post-metadata">

**Author:** ![HugoCharly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugocharly/32/16638_2.png) [@HugoCharly](https://discourse.gohugo.io/u/HugoCharly)\
**Post date:** [March 31, 2022, 3:24pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/3 "2022-03-31T15:24:26Z")

</div>

Thanks I’ll look into it !

---

<div class="post-metadata">

**Author:** ![HugoCharly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugocharly/32/16638_2.png) [@HugoCharly](https://discourse.gohugo.io/u/HugoCharly)\
**Post date:** [March 31, 2022, 5:33pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/4 "2022-03-31T17:33:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 31, 2022, 5:45pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/5 "2022-03-31T17:45:37Z")

</div>

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

```auto
{{ 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:

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

```

---

<div class="post-metadata">

**Author:** ![HugoCharly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugocharly/32/16638_2.png) [@HugoCharly](https://discourse.gohugo.io/u/HugoCharly)\
**Post date:** [March 31, 2022, 7:21pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/6 "2022-03-31T19:21:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 2, 2022, 7:21pm UTC](https://discourse.gohugo.io/t/image-processing-in-a-range/37968/7 "2022-04-02T19:21:42Z")

</div>

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