# Image Processing - improve documentation

**URL:** <https://discourse.gohugo.io/t/image-processing-improve-documentation/11928>\
**Category:** support\
**Created:** [May 10, 2018, 10:56am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928 "2018-05-10T10:56:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Smol](https://avatars.discourse-cdn.com/v4/letter/r/ecc23a/32.png) [@Robert\_Smol](https://discourse.gohugo.io/u/Robert_Smol)\
**Post date:** [May 10, 2018, 10:56am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/1 "2018-05-10T10:56:28Z")

</div>

Hi,

at page [[https://gohugo.io/content-management/image-processing/#readout](https://gohugo.io/content-management/image-processing/#readout)]([http://Image](http://Image) Processing) the example is very poor and I had quite some time figuring out how to show images in my `/content/post/my-post/gallery/*.png` in the resulting html.

First, the code is

```auto
{{ with .Resources.ByType "image" }}
{{ end }}

```

But this produces absolutely no list of images. What actually worked for me was switching the `with` for `range`.

```auto
{{ range .Resources.ByType "image" }}
  <img src="{{ .RelPermalink }}" alt="{{ .Title }}">
{{end}}

```

Can the documentation be improved?

---

<div class="post-metadata">

**Author:** ![anon94969202](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94969202](https://discourse.gohugo.io/u/anon94969202)\
**Post date:** [May 10, 2018, 11:04am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/2 "2018-05-10T11:04:09Z")

</div>

While I’m not sure if it fits your exact use case I added an implementation to After Dark you may wish to study to understand how image processing can be used to create responsive images:

> <https://github.com/comfusion/after-dark/commit/06457bc#diff-2b47cbfed271cf4ac42842432cd86177R17>

Hope this helps!

---

<div class="post-metadata">

**Author:** ![regis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/regis/32/4958_2.png) [@regis](https://discourse.gohugo.io/u/regis)\
**Post date:** [May 10, 2018, 11:13am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/3 "2018-05-10T11:13:27Z")

</div>

> [@Robert\_Smol](#):
>
> Can the documentation be improved?

PR are always welcome.

> [@Robert\_Smol](#):
>
> But this produces absolutely no list of images.

Nope it does not, it does as advertised: “…get all images in a Page Bundle”.

What you want is:

```auto
{{ with .Resources.ByType "image }}
   {{ range . }}
   [...]
   {{ end }}
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![Robert\_Smol](https://avatars.discourse-cdn.com/v4/letter/r/ecc23a/32.png) [@Robert\_Smol](https://discourse.gohugo.io/u/Robert_Smol)\
**Post date:** [May 10, 2018, 11:28am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/4 "2018-05-10T11:28:53Z")

</div>

Thank, you. I am not sure I would do PR if I do not understand how it should work in the first place.

Your example worked for me. Is there any difference in treating `list` versus `single` pages?

I have this code in both `single.html` and `list.html`:

```auto
{{ range .Resources.Match "images/*" }}
I got picture resource.
{{ end }}

```

And it works for any leaf `PageBundle` (e.g. `content/downloads/test/index.md`) but not for `content/downloads/_index.md`, while both folders have `images` folder with content ready.

I also noticed, if I delete the `resources` folder, sometimes I get mixed results (images start to show).

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [May 10, 2018, 11:35am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/5 "2018-05-10T11:35:58Z")

</div>

> [@Robert\_Smol](#):
>
> but not for `content/downloads/_index.md` , while both folders have `images` folder with content ready.

Yes, that’s by design. See row 4 in the table [here](https://gohugo.io/content-management/page-bundles/).

---

<div class="post-metadata">

**Author:** ![ChillBill](https://avatars.discourse-cdn.com/v4/letter/c/e47c2d/32.png) [@ChillBill](https://discourse.gohugo.io/u/ChillBill)\
**Post date:** [June 4, 2018, 4:17pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/6 "2018-06-04T16:17:42Z")

</div>

Hi everyone - not exactly on topic, but I didn’t find a better place to ask: When using the Image processing on page resources, as far as I experienced the original images always get copied over as well…which (at least in my case - and I guess in 99% of cases) is unnessesary, bc you normally want to use the processed images in your Website, right?  
So is there a possibility to stop hugo from doing that?

---

<div class="post-metadata">

**Author:** ![Pavel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pavel/32/18873_2.png) [@Pavel](https://discourse.gohugo.io/u/Pavel)\
**Post date:** [June 5, 2018, 7:38am UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/7 "2018-06-05T07:38:09Z")

</div>

Put them in static folder

---

<div class="post-metadata">

**Author:** ![ChillBill](https://avatars.discourse-cdn.com/v4/letter/c/e47c2d/32.png) [@ChillBill](https://discourse.gohugo.io/u/ChillBill)\
**Post date:** [June 5, 2018, 8:47pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/8 "2018-06-05T20:47:08Z")

</div>

Well if I put them in the static folder they only get copied over as they are. I don’t want them to be in the final website as they are, I only want the processed (resized) images to be in the in the website

---

<div class="post-metadata">

**Author:** ![Pavel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pavel/32/18873_2.png) [@Pavel](https://discourse.gohugo.io/u/Pavel)\
**Post date:** [June 5, 2018, 8:52pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/9 "2018-06-05T20:52:35Z")

</div>

Then you should resize and compress them yourself

---

<div class="post-metadata">

**Author:** ![ChillBill](https://avatars.discourse-cdn.com/v4/letter/c/e47c2d/32.png) [@ChillBill](https://discourse.gohugo.io/u/ChillBill)\
**Post date:** [June 5, 2018, 9:04pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/10 "2018-06-05T21:04:02Z")

</div>

Well thank you for your help…  
(just wondered if I was missing to see smth obvious as it seems to be a weird beaviour to me - everything else in the content folder that gets processed isn’t additionally copied over “as-is”)

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [June 5, 2018, 9:23pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/11 "2018-06-05T21:23:12Z")

</div>

Hugo does leave bundled images as they are and you can access them if needed (I use that fact to provide something to zoom into from time to time).

If you don’t want or cannot have large images clogging your webserver space, then yes, you have to do a bit of pre-processing. Size them down / optimize them to something reasonable, then let Hugo automate the rest of the way.

---

<div class="post-metadata">

**Author:** ![ChillBill](https://avatars.discourse-cdn.com/v4/letter/c/e47c2d/32.png) [@ChillBill](https://discourse.gohugo.io/u/ChillBill)\
**Post date:** [June 5, 2018, 10:07pm UTC](https://discourse.gohugo.io/t/image-processing-improve-documentation/11928/12 "2018-06-05T22:07:09Z")

</div>

Ok, thanks anyway!