# Image Processing Outside Folder

**URL:** <https://discourse.gohugo.io/t/image-processing-outside-folder/9887>\
**Category:** support\
**Created:** [January 7, 2018, 3:25am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887 "2018-01-07T03:25:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tech4him](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tech4him/32/5136_2.png) [@tech4him](https://discourse.gohugo.io/u/tech4him)\
**Post date:** [January 7, 2018, 3:25am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/1 "2018-01-07T03:25:10Z")

</div>

Is it possible to use Hugo 0.32’s new image processing feature for images in other folders?

For example, I have a site that is already structured in a format with all media in a separate `/content/images` folder, instead of beside each entry as a page bundle.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 7, 2018, 6:37am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/2 "2018-01-07T06:37:59Z")

</div>

> [@tech4him](#):
>
> Is it possible to use Hugo 0.32’s new image processing feature for images in other folders?
> 
> For example, I have a site that is already structured in a format with all media in a separate /content/images folder, instead of beside each entry as a page bundle.

Image Processing is available for Page Bundles. You need to restructure your content.

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 10:08pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/3 "2018-01-11T22:08:33Z")

</div>

I made a simple example repo of this [Here](https://github.com/talves/hugo-resource-images) and also answered your [SO here](https://stackoverflow.com/questions/48213883/image-processing-outside-bundles)

In summary, it is possible to access a sections image resources from another page or location in the content.

## For your example:

Add a `content/images/_index.md` file to be able to access the section (not sure if this is optional or not) then access the section for the resources inside your layout templates. You should also be able to access them from within a shortcode similar to in the docs.

```auto
    {{ $page := . }}
    {{ with .Site.GetPage "section" "images" }}
      {{ with .Resources.GetByPrefix $page.Params.imagename }}
        {{ $image200x := (.Resize "200x") }}
        {{ $image400x := (.Resize "400x") }}
        <img src="{{ $image200x.RelPermalink }}">
        <img src="{{ $image400x.RelPermalink }}">
        <br />
      {{ end }}
    {{ end }}

```

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 11, 2018, 10:16pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/4 "2018-01-11T22:16:09Z")

</div>

Interesting workaround. But you will get a /images/ URL published with this set up.

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 10:17pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/5 "2018-01-11T22:17:10Z")

</div>

Yep, small price to pay. I would just redirect it anyway.

I do think there are some issues with the local hugo server, but need to test it out. Published site works like a charm, so no problem there.

**Opinion:** I would have liked this to be a static dir location rather than just requiring them to be in a pages resource location. I see no advantages to not having a resources static location for images, etc., but maybe it is a requirement of the way go is handling them.

---

<div class="post-metadata">

**Author:** ![tech4him](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tech4him/32/5136_2.png) [@tech4him](https://discourse.gohugo.io/u/tech4him)\
**Post date:** [January 11, 2018, 10:24pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/6 "2018-01-11T22:24:50Z")

</div>

Nice, that workaround works. I was also able to add, at the top of my `baseof.html` file,

```auto
{{ $.Scratch.Add "media" ((.Site.GetPage "section" "media").Resources) }}

```

so that I can get the resources from any template file:

```auto
{{ range ($.Scratch.Get "media").ByType "image" }}

```

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 10:26pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/7 "2018-01-11T22:26:04Z")

</div>

Exactly, you could also make the `media` location a `.Site.Params` value in your `congif.toml` and change it easily for a template.

---

<div class="post-metadata">

**Author:** ![tech4him](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tech4him/32/5136_2.png) [@tech4him](https://discourse.gohugo.io/u/tech4him)\
**Post date:** [January 11, 2018, 10:26pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/8 "2018-01-11T22:26:50Z")

</div>

@alexandros Like @talves suggested above, is there any technical reason why media cannot be stored in a separate folder by default, or is this simply a decision?

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 10:29pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/9 "2018-01-11T22:29:42Z")

</div>

I guess in this solution we are setting up a media folder location for the image resources to be accessed from within the templates. I am happy with this requirement at the moment. It solves all my needed use cases.

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 10:31pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/10 "2018-01-11T22:31:54Z")

</div>

@tech4him I think it has something to do with the `Resources` context of the image file to be able to get the parameter values from a resource, but @bep or others will definitely know better.

Not sure if you know, but you can access the exact width and heigth of an image resource.

---

<div class="post-metadata">

**Author:** ![tech4him](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/tech4him/32/5136_2.png) [@tech4him](https://discourse.gohugo.io/u/tech4him)\
**Post date:** [January 11, 2018, 10:33pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/11 "2018-01-11T22:33:15Z")

</div>

Yes, I’m fine with using it as you’ve explained. I’m just wondering if this was a technical consideration, or simply a new structure that the Hugo team sees as more useful in the long run.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 11, 2018, 10:35pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/12 "2018-01-11T22:35:32Z")

</div>

I am not Hugo’s Dev. So I cannot answer this for you.

But as @talves said below I also think that there were context issues to consider as well as backwards compatibility for existing Hugo projects .

> [@talves](#):
>
> I think it has something to do with the Resources context of the image file to be able to get the parameter values from a resource

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 11, 2018, 11:11pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/13 "2018-01-11T23:11:59Z")

</div>

@tech4him and @talves Hugo 0.32+ also supports folder symbolic links.

I haven’t tested them yet, but I would think that you can use this to store your media library under /static/ and have its symbolic link under /content/

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 11, 2018, 11:13pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/14 "2018-01-11T23:13:42Z")

</div>

Let me test the symbolic links in this solution.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 12, 2018, 10:29am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/15 "2018-01-12T10:29:16Z")

</div>

If you got this working with a symbolic link then please do share.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 12, 2018, 11:27am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/16 "2018-01-12T11:27:40Z")

</div>

> [@talves](#):
>
> but maybe it is a requirement of the way go is handling them.

Not sure what Go has to do with it. What you want _can be done_ in any programming language.

But Hugo isn’t an “image gallery software”.

Hugo is all about content management. The images are tightly connected to page bundles in many, many ways. This does not work without them.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 12, 2018, 11:44am UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/17 "2018-01-12T11:44:16Z")

</div>

> [@bep](#):
>
> The images are tightly connected to page bundles in many, many ways. This does not work without them.

Apparently he developed a workaround to use Image Processing outside Page Bundles by using a /content/media folder for images . I haven’t tested it yet. But it seems interesting.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 12, 2018, 12:02pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/18 "2018-01-12T12:02:37Z")

</div>

Yes, that is cool. And there is an open issue about “pages that should not render”, which I guess also would improve this.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [January 12, 2018, 12:07pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/19 "2018-01-12T12:07:16Z")

</div>

Aha. So that Github issue is related. Thanks. Good to know.

---

<div class="post-metadata">

**Author:** ![talves](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/talves/32/2062_2.png) [@talves](https://discourse.gohugo.io/u/talves)\
**Post date:** [January 12, 2018, 2:29pm UTC](https://discourse.gohugo.io/t/image-processing-outside-folder/9887/20 "2018-01-12T14:29:52Z")

</div>

> [@bep](#):
>
> But Hugo isn’t an “image gallery software”.

Yeah, This I understand. Just discussing the alternative use cases as in the example of Netlify’s CMS requirements to manage a media folder in one place.

> [@talves](#):
>
> I guess in this solution we are setting up a media folder location for the image resources to be accessed from within the templates. I am happy with this requirement at the moment. It solves all my needed use cases.

[Next page](https://discourse.gohugo.io/t/image-processing-outside-folder/9887.md?page=2)