# Trying to process images, should I revamp my whole structure?

**URL:** <https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015>\
**Category:** support\
**Created:** [April 25, 2020, 12:56pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015 "2020-04-25T12:56:33Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 25, 2020, 12:56pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/1 "2020-04-25T12:56:33Z")

</div>

I’m currently in the process of improving the performances of my website. It has a blog, with all the articles stored inside a `blog` directory, as markdown files, in two languages.

Posts’ images are stored in the `static` directory, and I make the connection between posts and their images thanks to variables in the front-matter.

Now I see that I can’t use Image Processing for files that are stored in the `static` folder. So does that mean I need to change my whole site structure ?

I currently have:

```auto
blog/post1.md
blog/post1.fr.md
blog/post2.md
blog/post2.fr.md

static/img/resource1.jpg
static/img/resource2.jpg

```

Should I instead do this?

```auto
blog/post1/_index.md
blog/post1/_index.fr.md
blog/post1/resource1.jpg
blog/post2/_index.md
blog/post2/_index.fr.md
blog/post2/resource2.jpg

```

Thanks in advance for your help 🙂

---

<div class="post-metadata">

**Author:** ![jswtch](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jswtch/32/8984_2.png) [@jswtch](https://discourse.gohugo.io/u/jswtch)\
**Post date:** [April 26, 2020, 4:31pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/2 "2020-04-26T16:31:11Z")

</div>

You could create a headless bundle at `blog/resources`. Stick all of your images there and create a `blog/resources/index.md` that has `headless=true`

> **[Page Bundles](https://gohugo.io/content-management/page-bundles/#headless-bundle)**
>
> Content organization using Page Bundles

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 26, 2020, 7:50pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/3 "2020-04-26T19:50:42Z")

</div>

It looks to be a good solution but for some reason I can’t access the bundle when I try to add resources from a content that’s in another language.

My posts are all stored in the `content/blog` directory, in the form of `post1.md` / `post1.fr.md`. English is the default language and it has no problem accessing the headless bundle, but I can’t seem to access it from french pages.

I have a feeling I should put each post into its separate directory. It might be a bit more strict but I’m wondering if it’s not the best thing to do.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 1:37am UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/4 "2020-04-27T01:37:12Z")

</div>

You should be able to do something like

```auto
{{ $r := .Sites.First.GetPage "blog/resources"}}
r: {{ $r }}

```

You can also mount your static images into the assets dir and do something like:

```auto
{{ $img := resources.Get "images/photo.jpg" }}
{{ ($img.Fill "200x200").Permalink }}

```

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 10:08am UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/5 "2020-04-27T10:08:50Z")

</div>

Do the resources **have** to be in a folder named `resources`?

Before I saw your comment, I tried something “simpler”. I removed all my blog posts but one, and tried another structure. That is put it in its own sub-folder. So now I have this :

```markdown
/content
|-- blog
    |-- 2020-04-27-test-post
        |-- cover.jpg
        |-- img1.jpg
        |-- img2.jpg
        |-- index.md
        |-- index.fr.md

```

I kinda like this because I can refer the post’s image straight in my markdown thanks to the `![]()` markdown shortcut. The problem is I don’t know how to access `cover.jpg` which would be used in my `list.html` and `single.html` layouts.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 11:05am UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/6 "2020-04-27T11:05:29Z")

</div>

> [@fbnlsr](#):
>
> Do the resources **have** to be in a folder named `resources` ?

Nope, you can name it whatever you want.

* * *

> [@fbnlsr](#):
>
> access `cover.jpg`

You can `.GetPage` your `testpage`, then get Resources as per usual.

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 1:11pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/7 "2020-04-27T13:11:17Z")

</div>

hmm I don’t think I follow you there.

I have this in my `list.html` for instance. Note that I’m using `range` because I do some trickery on the `$index` to calculate a few CSS classes.

```auto
{{ range $index, $element := .Pages }}
{{ $cover := $element.Resources.GetMatch "cover.jpg" }}
{{ .Scratch.Set "coverUrl" $cover.RelPermalink }}
<div class="blog-cover lazy" data-src="{{ .Scratch.Get "coverUrl" }}">
    <a href="{{ .Permalink }}"></a>
</div>
{{ end }}

```

But I get this error: `execute of template failed: template: blog/list.html:20:53: executing "blog/list.html" at <$cover.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink`

I don’t think I understand how I could use `.GetPage` in that context.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 1:17pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/8 "2020-04-27T13:17:51Z")

</div>

Do you have your repo somewhere I can clone? It’s easier to help if we are talking about the same site context.

Otherwise, I would guess based on the error that you have a page somewhere without a `cover.jpg`, so `.GetMatch` returns `nil`, which gives an error when you try to get `.RelPermalink`. If that is the cause, enclose it in a `with` or test whether the resource exists before trying to access it.

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 1:29pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/9 "2020-04-27T13:29:38Z")

</div>

I do actually, you can check out this branch : [https://github.com/fbnlsr/primative.net/tree/hugo-resources](https://github.com/fbnlsr/primative.net/tree/hugo-resources)

The current live version of the site (without resources) is on the `master` branch.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 1:54pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/10 "2020-04-27T13:54:13Z")

</div>

Ok, so in your `blog/list.html`:

```auto
{{ range $index, $element := .Pages }}
    {{ $element }}
    <br>
    {{ $cover := $element.Resources.GetMatch "cover.jpg" }}
    {{ with $cover }}
        {{ .RelPermalink }}
    {{ end }}
{{ end }}

```

Renders the following:

```auto
hugo server:

en:

http://localhost:1313/blog/
Page(/blog/2018-06-15-forestry-a-static-website-cms/index.md)
/blog/forestry-a-static-website-cms/cover.jpg

fr:
http://localhost:1313/fr/blog/

Page(/blog/2018-06-15-forestry-a-static-website-cms/index.fr.md)
/fr/blog/forestry-un-cms-statique/cover.jpg

```

```auto
hugo:

en:

public/blog/forestry-a-static-website-cms/
├── cover.jpg
...
└── index.html

fr:

public/fr/blog/forestry-un-cms-statique/
├── cover.jpg
...
└── index.html

```

Do you get the same results?

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 2:02pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/11 "2020-04-27T14:02:21Z")

</div>

Yes I do.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 2:19pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/12 "2020-04-27T14:19:09Z")

</div>

Does that answer your question?

* * *

Going back to `.GetPage`, you would use that if you were to have a dedicated `headless` page to dump your resources into.

So in your example, if your example content bundle was renamed `blog/headless/index.md` and had `headless:true`, you would do:

```auto
with index.md headless:true
{{ $page := .Sites.First.GetPage "/blog/headless/index.md" }}

or, if you have both index.md and index.fr.md, headless:true
{{ $page := .GetPage "/blog/2018-06-15-forestry-a-static-website-cms" }}

headlesspage: {{ $page }}
<br>
{{ $cover := $page.Resources.GetMatch "cover.jpg" }}
{{ with $cover }}
    {{ .RelPermalink }}
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 2:29pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/13 "2020-04-27T14:29:21Z")

</div>

> [@pointyfar](#):
>
> Does that answer your question?

Well… no. 😄

I still don’t understand how I can access each post’s cover in the `list.html` template. I’m gonna have to access them since I loop into each post to retrieve the post’s title, excerpt, etc…

The thing I’m looking for in the end is a way to use Image Processing so that I can manipulate those covers depending if we’re in the post list or in the post itself.

You can see a live version of this site here btw: [Fabien Lasserre | Blog](https://www.primative.net/blog/)

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 27, 2020, 10:03pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/14 "2020-04-27T22:03:38Z")

</div>

I think I’ve got it!

With this code in my `list.html`

```auto
{{ $cover := $element.Resources.GetMatch "cover.jpg" }}
{{ if $cover }}
  {{ $coverResized := $cover.Resize "926x q90" }}
  {{ .Scratch.Set "coverUrl" $coverResized.RelPermalink }}
{{ end }}
<div class="blog-cover lazy" data-src="{{ .Scratch.Get "coverUrl" }}">
  <a href="{{ .Permalink }}"></a>
</div>

```

And this in my `single.html`

```auto
{{ $coverImg := .Page.Resources.GetMatch "cover.jpg" }}
{{ if $coverImg }}
  {{ $resizedCover := $coverImg.Resize "2000x q90" }}
  {{ .Scratch.Set "cover" $resizedCover.RelPermalink }}
{{ end }}
{{ $cover := .Scratch.Get "cover" }}

```

I think I’m doing what I’ve been trying! I can fetch the `cover.jpg` resource in both english and french, and resize the images. It looks like it’s working! 🙂

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 27, 2020, 11:24pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/15 "2020-04-27T23:24:47Z")

</div>

So, I don’t know if you still need the explanation:

```auto

{{ range $index, $element := .Pages }} <-- this bit goes through all the child pages in the list
    {{ $element }} <-- one child page, ie .Pages[$index]
    <br>
    {{ $cover := $element.Resources.GetMatch "cover.jpg" }} <-- grabs the resource matching "cover.jpg"
    {{ with $cover }} <-- checks if $cover exists
        {{ .RelPermalink }} <-- only gets run if 'with' statement is true
    {{ end }}
{{ end }}

```

So you would modify that to do:

```auto
{{ $coverUrl := "" }}
{{ with $cover }}
  {{ $coverResized := $cover.Resize "926x q90" }}
  {{ $coverUrl = $coverResized.RelPermalink }}
{{ end }}
... do stuff with {{ $coverUrl }} here ...

```

* * *

A minor point:

You don’t really need to `.Scratch` here (unless you really want to…)

Your code above could be rewritten as:

```auto
{{ $cover := $element.Resources.GetMatch "cover.jpg" }}
{{ $coverUrl := "" }}
{{ if $cover }}
  {{ $coverResized := $cover.Resize "926x q90" }}
  {{ $coverUrl = $coverResized.RelPermalink }}
{{ end }}
<div class="blog-cover lazy" data-src="{{ $coverUrl }}">
  <a href="{{ .Permalink }}"></a>
</div>

```

```auto
{{ $coverImg := .Page.Resources.GetMatch "cover.jpg" }}
{{ $cover := "" }}
{{ if $coverImg }}
  {{ $resizedCover := $coverImg.Resize "2000x q90" }}
  {{ $cover = $resizedCover.RelPermalink }}
{{ end }}
$cover: {{ $cover }}

```

---

<div class="post-metadata">

**Author:** ![fbnlsr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fbnlsr/32/11189_2.png) [@fbnlsr](https://discourse.gohugo.io/u/fbnlsr)\
**Post date:** [April 28, 2020, 8:38pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/16 "2020-04-28T20:38:53Z")

</div>

Thank you so much @pointyfar, you have no idea how much you’ve helped me not only resolve my problem, but also understand better how Hugo works.

I still had to use `.Scratch`, for some odd reason it would not let me directly use the variable.

Anyways I just deployed a new version of my site with a completely revamped architecture, and now I’m using **extensively** the pages resources and image processing features.

Thanks again for taking the time to answer my questions. I’d buy you a coffee if I could. 😄

---

<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 30, 2020, 8:38pm UTC](https://discourse.gohugo.io/t/trying-to-process-images-should-i-revamp-my-whole-structure/25015/17 "2020-04-30T20:38:56Z")

</div>

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